http://www.infoq.com/cn/articles/challenges-and-optimization-of-cross-border-website
周涛明:前端性能优化,按照经常使用的频率和效果上来看,在前端性能优化上经常用到的点如下:
第一,减少http请求是非常有效的措施
减少http请求是非常有效的性能优化手段,例如常用的css sprite技术将背景图片进行合并来减少网络开销,阿里巴巴主页就用到这个手段,合并ajax请求,也是减少http请求的手段,请求的发起和接收,比一个请求的网络开销要大得多,从目前线上的效果可以看到,减少http请求数是非常有效果的方式。
第二,减少重定向
重定向意味着两次连接,用户在访问一个页面时,意味第二次需要重启发起连接(keepalive会重用连接),第二次请求由于存在网络开销,会出现短暂的白屏,在跨境电子商务网站来说,由于各个地区的网络差异非常大,所以网络的开销是非常大的,在阿里巴巴跨境网站业务,会针对新老用户,做不同的页面展现逻辑,重定向是非常普遍的,也很容易被开发忽视,在某种程度上来说,重定向编程相对容易,所以在下单关键流程上出现了非常多的重定向的跳转,在Google Analysis上面可以明显看到重定向时间达到1s以上,去年做了一次全面的整改,把重定向全部去掉,改成forward内部跳转,减少网络开销,成效十分明显,关键页面性能onload时间减少1s左右。
第三,预加载
预加载是预见性用户行为的性能优化方式,根据用户的操作行为,在CPU处于闲置状态时,进行预先的资源加载,当应用达到预测的页面时,部分资源已经预先加载,所以性能就提升了。在阿里巴巴B2C网站Aliexpress.com的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尽量不要放在上面,尽管现代的浏览器已经做了充分的优化-大部分情况下,已经不阻塞并行下载了,但是在很多情况下仍然会阻塞并行渲染