web性能优化学习

Posted 2020-09-28

web性能的黄金法则‘2-5-8’

2s内得到响应，会感觉系统速度很快，5s的到响应，系统速度还是很快的，8s系统速度比较慢，还能等待，8s以上，没法等了

在web优化上减少http请求是一方面

• 减少http请求可以从 ：

1.减少图片的请求数量，对于一个网站如果用到了很多的图片，可以使用css sprites(雪碧图) 把图片集中在一张图片上，这样可以压缩大小，也减少了请求数量，在使用的时候可以使用background-position 来进行处理。

2.使用iconfont，在一些使用icon图标的情况下，可以把icon的图片换成icon font 来减少图片的http请求，对于icon font，bootstrap中也有提供，还有

Font Awesome Icons 中也提供了

3.减少css js 文件的请求，我们可以把一些通用的内容放到一个文件中，把一些小文件合并成一个文件然后进行压缩处理来减少文件的大小，这样也是可以减少请求的。

4.使用data:URL 协议使你的页面直接包含图像(内联图片) 这样也可以减少http请求，但是内联图片也优缺点，它不可以进行缓存，而且只有在IE8以上使用

•  优化页面

1.可以使用外联样式，减少使用内联样式以及嵌入样式，使用外联样式可以更好的进行优化，也可以动态修改，对于一些兼容IE浏览器的样式，可以单独写一个文件，而不是放在同一个样式表中，这样的好处是当项目不需要兼容的时候可以更好的去除

2.同样也使用外部脚本，而不是把脚本放到任何地方

3.样式要放置在head标签中，而脚本文件要放到body的底部。因为脚本文件会阻塞加载，样式文件放在head标签中会减少页面呈现的时间，因为在加载文件的同时，也会对页面进行渲染，对于js文件中也要尽量减少直接对标签进行处理，如果要改变样式，可以通过加入className，或是删除className进行处理

• 压缩文件

可以压缩js,css及html文件 文件来减小文件的大小，从而减小http请求的大小