淘宝页面的性能优化

挑战：

数据来源多
串行请求渲染模块
运营数据和个性化数据
数据兜底容灾

影响首页性能的因素

1 依赖过多
数据请求分为：静态资源，CDN缓存加速静态资源，后端接口
2 无法直接输出首屏数据
3 模块过多
4 图片过多，翻页往下滚动

网页性能衡量指标

1 FPS 屏幕刷新率为60fps,当页面元素动画、滚动或者渐变时绘制速率小于 60，就会不流畅，小于 24 就会卡顿，小于 12 基本认定卡爆了。
2 DOMContentLoaded 和 Load
DOM 加载并且解析完成才会触发 DOMContentLoaded 事件。DOM过多或者嵌套过深，时间回较长
3 流畅度
流畅度是对 FPS 的视觉反馈，FPS 值越高，视觉呈现越流畅。为了保障页面的加载速度，很多内容不会在页面打开的时候全部加载到客户端。

淘宝首页的性能优化

1 关键模块优先，懒加载
其他模块加载时间
（1）当页面中触发mousemove scroll mousedown touchstart touchmove keydown resize onload这些事件的时候，说明用户开始与页面交互了，程序必须开始加载。
（2）设定了一个超时加载，5s 之后，不论页面加载情况如何，都会将剩下的非关键模块加入到懒加载监控
2 懒执行，有交互才执行
3 更懒的执行，刷新页面才执行
4 图片尺寸的控制和懒加载
5 低频修改模块，缓存请求
有一些模块数据是很少被修改的，比如接口的兜底数据、阿里 APP 模块数据等，可以通过调整参数，设置模块的缓存时间

优化的思考角度

首屏一定要快
滚屏一定要流畅
能不加载的先别加载
能不执行的先别执行
渐进展现、圆滑展现

(function() {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  }
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }
  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
  }
})();