前端性能优化

399 阅读2分钟
1. 减少HTTP请求次数
尽量合并图片、CSS、JS。比如加载一个页面,如果有5个css文件的话,那么会发出5次http请求,这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话,就只需要发出一次http请求,节省网络请求时间,加快页面的加载。
2. 避免空的src和href
当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。所以要避免犯这样的疏忽。
3. 把CSS放到顶部
网页上的资源加载时从上网下顺序加载的,所以css放在页面的顶部能够优先渲染页面,让用户感觉页面加载很快。
4. 把JS放到底部
加载js时会对后续的资源造成阻塞,必须得等js加载完才去加载后续的文件 ,所以就把js放在页面底部最后加载。
5. 避免使用CSS表达式
举个css表达式的例子
HTML复制全屏
a.font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );
b.这个表达式会持续的在页面上计算样式,影响页面的性能。并且css表达式只被IE支持
6. 将CSS和JS放到外部文件中
目的是缓存文件,可以参考原则4。 但有时候为了减少请求,也会直接写到页面里,需根据PV和IP的比例权衡。
7. 精简CSS和JS
这里就涉及到css和js的压缩了。现在的压缩工具有很多,基本主流的前端构建工具都能进行css和js文件的压缩,如glup等。