标签：style http io ar color os 使用 sp for
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尽量不要放在上面，尽管现代的浏览器已经做了充分的优化-大部分情况下，已经不阻塞并行下载了，但是在很多情况下仍然会阻塞并行渲染
标签：style http io ar color os 使用 sp for
原文地址：http://www.cnblogs.com/fengjian/p/4147576.html
