前端性能优化
第一,减少http请求是非常有效的措施
减少http请求是非常有效的性能优化手段,例如常用的css sprite技术将背景图片进行合
并来减少网络开销,合并ajax请求,也是减少http请求的手段,请求的发起和接收,比一个请求的网络开销要大得多。
第二,减少重定向
重定向意味着两次连接,用户在访问一个页面时,意味第二次需要重启发起连接
(keepalive会重用连接),第二次请求由于存在网络开销,会出现短暂的白屏,在跨境
电子商务网站来说,由于各个地区的网络差异非常大,所以网络的开销是非常大的,在
跨境网站业务,会针对新老用户,做不同的页面展现逻辑,重定向是非常普遍
的,也很容易被开发忽视,在某种程度上来说,重定向编程相对容易,所以在下单关键
流程上出现了非常多的重定向的跳转,在Google Analysis上面可以明显看到重定向时间
达到1s以上,去年做了一次全面的整改,把重定向全部去掉,改成forward内部跳转,减
少网络开销,成效十分明显,关键页面性能onload时间减少1s左右。
第三,预加载
预加载是预见性用户行为的性能优化方式,根据用户的操作行为,在CPU处于闲置状态
时,进行预先的资源加载,当应用达到预测的页面时,部分资源已经预先加载,所以性
能就提升了。在B2C网站的Detail页面进行性能优化时,就在用
户搜索页面进行预先加载用户搜索的前6个商品,目前支持的浏览器有 Chrome 和Firefox.
其实超级简单了,就是加一个类似的链接,href可以是任何资源,HTML, JavaScript,
CSS, 图片:
<link rel=”prerender” href=”" > (Chrome)
<link rel=”prefrech” href=”" > (Firefox)
第四,尽量减少cookie的大小
大量的cookie会加重请求的发送网络开销,http规范对头是不压缩的,对于跨境网站来
说,网络差异非常大,所以过大的cookie的网络latency是非常大的,当然为了满足业务
需求,cookie的大小大也没有更好的方法,所以只能尽量减少,毕竟满足业务需求前提
下,才能满足性能。
第五,延迟加载
延迟加载,将资源延迟到需要的时候的加载,例如detail页面,相关产品推荐,当用户
浏览更多的信息往下拉动滚动时,才进行加载,异步加载可以大幅减少对后端资源的使
用,在需要的时候加载,是资源合理使用常用的方式,但是也带来一个问题,当往下拉
才去加载,如果性能不够好,用户的体验其实是不好的,“菊花”转动的时间会比较长,
同时异步加载对前端性能的作用也是非常明显的,渲染的节点数量大幅减少。
第六,Ajax异步化减少DOM的节点数,加快渲染时间,first byte时间
异步化通常是首屏加载优化,加快dom渲染速度(减少dom数量),异步化带来了
firstbyte性能提升,用户感知页面有内容更快了,异步化同样也会带来用户体验的问
题,大量的异步化,js的阻塞渲染(下载)的概率越大,所以适度的ajax很重要,用户
体验是第一位的。
第七,CDN加速
Cdn加速其实是大型网站都要用的手段,cdn消除了地区间的用户访问差异,让用户就近
访问,cdn需要注意的是需要尽量减少回源(不命中cdn),资源的过期时间尽量长,合
理的cdn架构也很重要,回源之后,文件处理过程也很重要,坚持一个原则,那就是尽
量短的latency。
第八,延迟渲染
异步加载带来的问题是,需要发起请求到服务器拿数据,如果网络条件差,用户体验影
响是非常大的,延迟渲染就是在需要的时候渲染dom,渲染html片段。例如搜索list页
面,有32个搜索结果,前6个商品(首屏),是同步渲染出来的,其它的商品列表的
html,用textarea进行包装,浏览器会把这种带有text area标签的html片断当做一个节点
来看,所以渲染速度大幅提高,这种方式是提高首屏的渲染速度,达到了性能和用户体
验的平衡。
第九,DNS预解析
Dns解析容易被人忽视,对于跨境网站,local dns位于世界各地,离机房的dns server是
非常远的,解析成本实际上是非常高,特别是域名多的情况下,提前预加载dns,相当
于在a页面提前把b页面的所有的域名提前加载进来,这样到达b页面时,dns几乎不需要
解析了,dns解析的提前加载,提高了首屏full load、firstbyte,用户体验明显增加。
第十,js放在头部阻塞浏览器并行渲染
JS尽量不要放在上面,尽管现代的浏览器已经做了充分的优化-大部分情况下,已经不
阻塞并行下载了,但是在很多情况下仍然会阻塞并行渲染
原文链接:http://my.oschina.net/u/1182602/blog/339771