挑戰(zhàn)：

數(shù)據(jù)來源多
串行請(qǐng)求渲染模塊
運(yùn)營數(shù)據(jù)和個(gè)性化數(shù)據(jù)
數(shù)據(jù)兜底容災(zāi)

影響首頁性能的因素

1 依賴過多
數(shù)據(jù)請(qǐng)求分為：靜態(tài)資源，CDN緩存加速靜態(tài)資源，后端接口
2 無法直接輸出首屏數(shù)據(jù)
3 模塊過多
4 圖片過多，翻頁往下滾動(dòng)

網(wǎng)頁性能衡量指標(biāo)

1 FPS 屏幕刷新率為60fps,當(dāng)頁面元素動(dòng)畫、滾動(dòng)或者漸變時(shí)繪制速率小于 60，就會(huì)不流暢，小于 24 就會(huì)卡頓，小于 12 基本認(rèn)定卡爆了。
2 DOMContentLoaded 和 Load
DOM 加載并且解析完成才會(huì)觸發(fā) DOMContentLoaded 事件。DOM過多或者嵌套過深，時(shí)間回較長(zhǎng)
3 流暢度
流暢度是對(duì) FPS 的視覺反饋，F(xiàn)PS 值越高，視覺呈現(xiàn)越流暢。為了保障頁面的加載速度，很多內(nèi)容不會(huì)在頁面打開的時(shí)候全部加載到客戶端。

淘寶首頁的性能優(yōu)化

1 關(guān)鍵模塊優(yōu)先，懶加載
其他模塊加載時(shí)間
（1）當(dāng)頁面中觸發(fā)mousemove scroll mousedown touchstart touchmove keydown resize onload這些事件的時(shí)候，說明用戶開始與頁面交互了，程序必須開始加載。
（2）設(shè)定了一個(gè)超時(shí)加載，5s 之后，不論頁面加載情況如何，都會(huì)將剩下的非關(guān)鍵模塊加入到懶加載監(jiān)控
2 懶執(zhí)行，有交互才執(zhí)行
3 更懶的執(zhí)行，刷新頁面才執(zhí)行
4 圖片尺寸的控制和懶加載
5 低頻修改模塊，緩存請(qǐng)求
有一些模塊數(shù)據(jù)是很少被修改的，比如接口的兜底數(shù)據(jù)、阿里 APP 模塊數(shù)據(jù)等，可以通過調(diào)整參數(shù)，設(shè)置模塊的緩存時(shí)間

優(yōu)化的思考角度

首屏一定要快
滾屏一定要流暢
能不加載的先別加載
能不執(zhí)行的先別執(zhí)行
漸進(jìn)展現(xiàn)、圓滑展現(xiàn)

(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);
    };
  }
})();