前端性能优化

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尽可能不要放在上面，尽管现代的浏览器已经作了充分的优化-大部分状况下，已经不阻塞并行下载了，可是在不少状况下仍然会阻塞并行渲染