一、網頁生成的過程

要理解網頁性能為什么不好，就要了解網頁是怎么生成的？網頁的生成過程，大概可以分成五步

1.HTML代碼轉化成DOM
2.CSS代碼轉化成CSSOM（CSS Object Model）
3.結合DOM和CSSOM，生成一顆渲染樹（包括每個節點的視覺信息）
4.生成布局（layout），即將渲染書樹所有節點進行平面合成
5.將布局繪制（paint）在屏幕上

這五步里，第一步到第三步都非常快，耗時的是第四部和第五部

"生成布局(flow)"和"繪制(paint)"這兩部，合稱為"渲染(render)"

頁面生成

二、重排和重繪

網頁生成的時候，至少會渲染一次。用戶訪問的過程中，還會不斷重新渲染

以下三種情況，會導致網頁重新渲染

• 修改DOM
• 修改CSS
• 用戶事件（鼠標懸浮、頁面滾動、輸入框輸入文字、改變窗口大小）

重新渲染，就需要重新生成布局和重新繪制。前者叫做“重排（reflow）”，后者叫“重繪”(repaint)

需要注意的是，“重繪”不一定需要“重排”，比如改變頁面元素的顏色，就只會觸發“重繪”，不會觸發“重排”，因為布局沒有改變。但是，“重排”必然導致重繪，比如改變一個網頁的位置，就會同時出發“重排”和“重繪”，因為布局改變了

三、對于性能的影響

重排和重繪會不斷觸發，這是不可避免的。但是，他們非常耗費資源，是導致網頁性能低下的根本原因

提高網頁性能，就是要降低“重排”和“重繪”的頻率和成本，盡量少觸發重新渲染

前面提到，DOM和CSS變動，都會觸發重新渲染。但是，瀏覽器已經很智能了，會盡量把所有的變動集中在一起，排成一個隊列，然后一次性執行，盡量避免多次重新渲染

div.style.color = "blue"
div.style.marginTop = "30px"

上面代碼中，div元素兩個樣式變動，但是瀏覽器只會觸發一次重排和重繪。
如果寫的不好，就會觸發兩次重排和重繪

div.style.color = 'blue'
var margin = parseInt(div.style.marginTop)
div.style.marginTop = (margin + 10) + 'px'

上面代碼對div元素設置顏色以后，第二行要求瀏覽器給出該元素的位置，所以瀏覽器不得不立即重排

一般來說，樣式的寫操作之后，如果有下面這些屬性的讀操作，都會引發瀏覽器立即重新渲染

• offsetTop/offsetLeft/offsetWidth/offsetHeight
• scrollTop/scrollLeft/scrollWidth/scrollHeight
• clientTop/clientLeft/clientWidth/clientHeight
• getComputedStyle()

所以，從性能角度考慮。盡量不要把讀操作和寫操作，放在一個語句里面

//bad
div.style.left = div.offsetLeft + 10 + "px"
div.style.top = div.div.offsetTop + 10 + "px"

//good
var left = div.offsetLeft
var top = div.offsetTop
div.style.left = left + 10 + 'px'
div.style.top = top + 10 + "px";

一般的規則是

• 樣式表越簡單，重排和重繪就會越快
• 重排和重繪的DOM元素層級越高，成本就越高
• table元素的重排和重回成本，要高于div元素

四、提高性能的九個技巧

主要是為了降低瀏覽器重新渲染的頻率和成本

第一條、讀寫操作分離 DOM的多個讀操作（或多個寫操作），應該放在一起。不要兩個讀操作，加入一個寫操作
第二條、緩存樣式 如果某個樣式是通過重排的得到的，那么最好緩存結果。避免下一次泳道的時候，瀏覽器又要重排
第三條、class或csstext一次性修改樣式 不要一條條地改變樣式，而是通過改變class，或者csstext屬性，一次性地修改樣式

//bad 
var left = 10;
var top = 10;
div.style.left = left + 'px';
el.style.top  = top  + "px"

//good
div.className += "theClassName"

//good
div.style.cssText += ": left: " + left + "px; top: " + top + "px ;";

第四條、盡量使用離線DOM,而不是真實的DOM來改變元素樣式比如，使用Document Fragment對象，完成后再把這個對象加入DOm。再比如，使用clodeNode()方法，在克隆的節點上進行操作，然后在用克隆的節點替換原始節點
第五條、靈活使用display:none 先將元素設為display:none（需要1次重排和重繪），然后對這個節點進行100次操作，最后再回復顯示（需要1次重排和重繪）。這樣一來，你就用兩次重新渲染，取代了高達100次的重新渲染
第六條、position屬性為absolute或fixed的元素 重排的開銷會比較小，因為不用考慮它對其他元素的影響
第七條、必要時才設置display屬性為可見 因為不可見的元素不應心重排和重繪。另外，visibility:hidden的元素之對重繪有影響，不影響重排
第八條、使用虛擬DOM的腳本庫 React Vue
第九條、使用window.requestAnimationFrame()、window.requestIdleCallback()兩個方法調節重新渲染（詳見下文）

五、刷新率（FPS）

很多時候，密集的重新渲染是無法避免的，比如scroll事件回調函數和頁面動畫

網頁動畫的每一幀(frame)都是一個重新渲染,每秒低于24幀的動畫，人眼就能感受到停頓。一般的網頁動畫，需要達到每秒30幀到60幀，才能比較流暢。比如能達到每秒70幀甚至80幀，就會及其流暢

如果想達到60幀的刷新率，就意味著JavaScript線程每個任務的耗時，必須少于16毫秒。一個解決辦法是使用Web Worker,主線程只用于UI渲染，然后跟UI渲染不相干的任務，都放在Worker線程

六 window.requestAnimationFrame(callback)

有一些JavaScript方法可以調節重新渲染，答復提高網頁性能。

其中最重要的，就是window.requestAnimationFrame()方法。他可以將某些代碼放到下一次重新渲染時執行

(1)分離多個讀寫操作

function doubleHeight(element) {
  var currentHeight = element.clientHeight;
  element.style.height = (currentHeight * 2) + 'px';
}
elements.forEach(doubleHeight);

上面的代碼使用循環操作，是每個元素的高度都增加一倍。可是，每次循環都是，讀操作后面跟著一個寫操作。這會在短時間內觸發大量的重新渲染，顯然對于網頁性能很不利
我們可以使用window.requestAnimationFrame()，讓讀操作和寫操作分離，把所有寫操作放到下一次重新渲染

function doubleHeight(element) {
  var currentHeight = element.clientHeight;
  window.requestAnimationFrame(function () {
    element.style.height = (currentHeight * 2) + 'px';
  });
}
elements.forEach(doubleHeight);

(2)頁面滾動事件
頁面滾動事件（scroll）的監聽函數，就很適用window.requestAnimationFrame(),推遲到下一次重新渲染

$(window).on('scroll', function(){
     window.requestAnimationFrame(scrollHandler);
})

(3)網頁動畫
當然，最適用的場合還是網頁動畫。下面是一個旋轉動畫的例子，元素每一幀旋轉1度

var rAF = window.requestAnimationFrame;

var degrees = 0;
function update() {
  div.style.transform = "rotate(" + degrees + "deg)";
  console.log('updated to degrees ' + degrees);
  degrees = degrees + 1;
  rAF(update);
}
rAF(update);

七、window.requestIdleCallback(callback，[option])

requestIdleCallback()指定只有當一幀的末尾有空閑時間，才會執行回調函數

requestIdleCallback(fn);

上面代碼中，只有當前陣的運行時間小于16.16ms時，函數fn才會執行。否則，就推遲到下一陣，如果下一幀也沒有空閑時間，就推遲到下下一幀，以此類推

它還可以接受第二個參數，表示指定的毫秒數。如果在指定的這段時間之內，每一幀都沒有空閑時間，那么函數fn將會強制執行。

requestIdleCallback(fn, 5000)

上面的代碼表示，函數fn最遲會在5000毫秒之后執行
函數fn可以接受一個deadline對象作為參數

requestIdleCallback(function someHeavyComputation(deadline) {
  while(deadline.timeRemaining() > 0) {
    doWorkIfNeeded();
  }

  if(thereIsMoreWorkToDo) {
    requestIdleCallback(someHeavyComputation);
  }
});

上面函數代碼中，回調函數someHeavyComputation的參數是一個deadline對象
deadline對象有一個方法和一個屬性：timeRemaing()和didTimeout

（1）timeRemaining() 方法
timeRemaining()方法返回當前幀還剩余的毫秒。這個方法只能讀，不能寫，而且會動態更新。因此可以不斷檢查一個屬性，如果還有剩余時間的話，就不斷執行某些服務。一旦這個屬性等于0，就把任務分配到下一輪requestIdleCallback

（2）didTimeout屬性
deadline對象的didTimeout屬性會返回一個布爾值，表示指定的時間是否過期。這意味著，如果回調函數由于指定事件過期而出發，那么你會得到兩個結果

• timeRemaining方法返回0
• didTimeout屬性等于true

因此，如果回調函數執行了，無非是兩種原因：當前幀有空閑時間，或者指定時間到了

function myNonEssentialWork (deadline) {
  while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0)
    doWorkIfNeeded();

  if (tasks.length > 0)
    requestIdleCallback(myNonEssentialWork);
}

requestIdleCallback(myNonEssentialWork, 5000);

上面代碼確保了，doWorkIfNeeded函數一定會在將來某個比較空閑的時候（或者在指定事件過期后）得到反復執行

參考連接

網頁性能管理詳解

拓展連接

2017全新Chrome Devtools Performance使用指南
css屬性觸發重排、重繪