網(wǎng)頁生成的過程
要理解網(wǎng)頁性能為什么不好，就要了解網(wǎng)頁是怎么生成的。
網(wǎng)頁的生成過程，大致可以分成五步：
1.HTML代碼轉(zhuǎn)化成DOM。
2.CSS代碼轉(zhuǎn)化成CSSOM（CSS Object Model）。
3.結(jié)合DOM和CSSOM，生成一棵渲染樹（包含每個節(jié)點的視覺信息）。
4.生成布局（layout），即將所有渲染樹的所有節(jié)點進(jìn)行平面合成。
5.將布局繪制（paint）在屏幕上。
"生成布局"（flow）和"繪制"（paint）這兩步，合稱為"渲染"（render）。
重排和重繪
網(wǎng)頁生成的時候，至少會渲染一次。用戶訪問的過程中，還會不斷重新渲染。
重新渲染，就需要重新生成布局和重新繪制。前者叫做重排（reflow），后者叫做重繪（repaint）。
需要注意的是，重繪不一定需要重排，重排必然導(dǎo)致重繪。
對于性能的影響
提高網(wǎng)頁性能，就是要降低"重排"和"重繪"的頻率和成本，盡量少觸發(fā)重新渲染。
DOM變動和樣式變動，都會觸發(fā)重新渲染。但是，瀏覽器已經(jīng)很智能了，會盡量把所有的變動集中在一起，排成一個隊列，然后一次性執(zhí)行，盡量避免多次重新渲染。
div.style.color = 'blue';
div.style.marginTop = '30px';
上面代碼中，div元素有兩個樣式變動，但是瀏覽器只會觸發(fā)一次重排和重繪。
如果寫得不好，就會觸發(fā)兩次重排和重繪。
div.style.color = 'blue';
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + 'px';
上面代碼對div元素設(shè)置背景色以后，第二行要求瀏覽器給出該元素的位置，所以瀏覽器不得不立即重排。
一般來說，樣式的寫操作之后，如果有下面這些屬性的讀操作，都會引發(fā)瀏覽器立即重新渲染。
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.offsetTop + 10 + "px";
// good
var left = div.offsetLeft;
var top = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";
一般的規(guī)則是：
- 樣式表越簡單，重排和重繪就越快。
- 重排和重繪的
DOM元素層級越高，成本就越高。 -
table元素的重排和重繪成本，要高于div元素。
重排何時發(fā)生
- 添加或者刪除可見的
DOM元素。 - 元素位置改變。
- 元素尺寸改變。
- 元素內(nèi)容改變（例如：一個文本被另一個不同尺寸的圖片替代）。
- 頁面渲染初始化（這個無法避免）。
- 瀏覽器窗口尺寸改變。
最小化重繪和重排
DOM的多個讀操作（或多個寫操作），應(yīng)該放在一起。不要兩個讀操作之間，加入一個寫操作。如果某個樣式是通過重排得到的，那么最好緩存結(jié)果。避免下一次用到的時候，瀏覽器又要重排。
不要一條條地改變樣式，而要通過改變
class，或者csstext屬性，一次性地改變樣式。
// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top = top + "px";
// good
el.className += " theclassname";
// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
- 盡量使用離線
DOM，而不是真實的網(wǎng)面DOM，來改變元素樣式。比如，操作Document Fragment對象，完成后再把這個對象加入DOM。再比如，使用cloneNode()方法，在克隆的節(jié)點上進(jìn)行操作，然后再用克隆的節(jié)點替換原始節(jié)點。
<ul id='fruit'>
<li> apple </li>
<li> orange </li>
</ul>
如果代碼中要添加內(nèi)容為peach、watermelon兩個選項，你會怎么做？
let lis = document.getElementById('fruit');
let li=document.createElement('li');
li.innerHTML='apple';
lis.appendChild(li);
let li = document.createElement('li');
li.innerHTML = 'watermelon';
lis.appendChild(li);
很容易想到如上代碼，但是很顯然，重排了兩次，怎么破？
前面我們說了，隱藏的元素不在渲染樹中，太棒了，我們可以先把id為fruit的ul元素隱藏（display=none)，然后添加li元素，最后再顯示，但是實際操作中可能會出現(xiàn)閃動，原因這也很容易理解。
這時，fragment元素就有了用武之地了。
let fragment = document.createDocumentFragment();
let li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);
let li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li);
document.getElementById('fruit').appendChild(fragment);
文檔片段是個輕量級的document對象，它的設(shè)計初衷就是為了完成這類任務(wù)——更新和移動節(jié)點。文檔片段的一個便利的語法特性是當(dāng)你附加一個片斷到節(jié)點時，實際上被添加的是該片斷的子節(jié)點，而不是片斷本身。只觸發(fā)了一次重排，而且只訪問了一次實時的DOM。
先將元素設(shè)為
display: none（需要1次重排和重繪），然后對這個節(jié)點進(jìn)行100次操作，最后再恢復(fù)顯示（需要1次重排和重繪）。這樣一來，你就用兩次重新渲染，取代了可能高達(dá)100次的重新渲染。position屬性為absolute或fixed的元素，重排的開銷會比較小，因為不用考慮它對其他元素的影響。只在必要的時候，才將元素的
display屬性為可見，因為不可見的元素不影響重排和重繪。另外，visibility : hidden的元素只對重繪有影響，不影響重排。使用虛擬
DOM的腳本庫，比如React等。使用
window.requestAnimationFrame()、window.requestIdleCallback()這兩個方法調(diào)節(jié)重新渲染.
