網(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历葛，生成一棵渲染樹（包含每個(gè)節(jié)點(diǎn)的視覺信息）。
4.生成布局（layout）嘀略，即將所有渲染樹的所有節(jié)點(diǎn)進(jìn)行平面合成恤溶。
5.將布局繪制（paint）在屏幕上。
"生成布局"（flow）和"繪制"（paint）這兩步帜羊，合稱為"渲染"（render）咒程。
重排和重繪
網(wǎng)頁生成的時(shí)候，至少會(huì)渲染一次讼育。用戶訪問的過程中帐姻，還會(huì)不斷重新渲染稠集。
重新渲染，就需要重新生成布局和重新繪制饥瓷。前者叫做重排（reflow）剥纷，后者叫做重繪（repaint）。
需要注意的是呢铆，重繪不一定需要重排晦鞋，重排必然導(dǎo)致重繪。
對(duì)于性能的影響
提高網(wǎng)頁性能棺克，就是要降低"重排"和"重繪"的頻率和成本悠垛，盡量少觸發(fā)重新渲染。
DOM變動(dòng)和樣式變動(dòng)逆航，都會(huì)觸發(fā)重新渲染鼎文。但是，瀏覽器已經(jīng)很智能了因俐，會(huì)盡量把所有的變動(dòng)集中在一起拇惋，排成一個(gè)隊(duì)列，然后一次性執(zhí)行抹剩，盡量避免多次重新渲染撑帖。
div.style.color = 'blue';
div.style.marginTop = '30px';
上面代碼中，div元素有兩個(gè)樣式變動(dòng)澳眷，但是瀏覽器只會(huì)觸發(fā)一次重排和重繪胡嘿。
如果寫得不好，就會(huì)觸發(fā)兩次重排和重繪钳踊。
div.style.color = 'blue';
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + 'px';
上面代碼對(duì)div元素設(shè)置背景色以后衷敌，第二行要求瀏覽器給出該元素的位置，所以瀏覽器不得不立即重排拓瞪。
一般來說缴罗，樣式的寫操作之后，如果有下面這些屬性的讀操作祭埂，都會(huì)引發(fā)瀏覽器立即重新渲染面氓。
offsetTop/offsetLeft/offsetWidth/offsetHeight
scrollTop/scrollLeft/scrollWidth/scrollHeight
clientTop/clientLeft/clientWidth/clientHeight
getComputedStyle()
所以，從性能角度考慮蛆橡，盡量不要把讀操作和寫操作舌界，放在一個(gè)語句里面。
// 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ī)則是：
- 樣式表越簡(jiǎn)單泰演，重排和重繪就越快呻拌。
- 重排和重繪的
DOM元素層級(jí)越高，成本就越高睦焕。 -
table元素的重排和重繪成本柏锄，要高于div元素酿箭。
重排何時(shí)發(fā)生
- 添加或者刪除可見的
DOM元素。 - 元素位置改變趾娃。
- 元素尺寸改變缭嫡。
- 元素內(nèi)容改變（例如：一個(gè)文本被另一個(gè)不同尺寸的圖片替代）。
- 頁面渲染初始化（這個(gè)無法避免）抬闷。
- 瀏覽器窗口尺寸改變妇蛀。
最小化重繪和重排
DOM的多個(gè)讀操作（或多個(gè)寫操作），應(yīng)該放在一起笤成。不要兩個(gè)讀操作之間评架，加入一個(gè)寫操作。如果某個(gè)樣式是通過重排得到的炕泳，那么最好緩存結(jié)果纵诞。避免下一次用到的時(shí)候，瀏覽器又要重排培遵。
不要一條條地改變樣式浙芙，而要通過改變
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，而不是真實(shí)的網(wǎng)面DOM皇耗，來改變?cè)貥邮侥洗啊１热纾僮?code>Document Fragment對(duì)象郎楼，完成后再把這個(gè)對(duì)象加入DOM万伤。再比如，使用cloneNode()方法呜袁，在克隆的節(jié)點(diǎn)上進(jìn)行操作敌买，然后再用克隆的節(jié)點(diǎn)替換原始節(jié)點(diǎn)。
<ul id='fruit'>
<li> apple </li>
<li> orange </li>
</ul>
如果代碼中要添加內(nèi)容為peach傅寡、watermelon兩個(gè)選項(xiàng)放妈，你會(huì)怎么做北救？
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元素，最后再顯示疗绣，但是實(shí)際操作中可能會(huì)出現(xiàn)閃動(dòng)线召，原因這也很容易理解。
這時(shí)多矮，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);
文檔片段是個(gè)輕量級(jí)的document對(duì)象，它的設(shè)計(jì)初衷就是為了完成這類任務(wù)——更新和移動(dòng)節(jié)點(diǎn)塔逃。文檔片段的一個(gè)便利的語法特性是當(dāng)你附加一個(gè)片斷到節(jié)點(diǎn)時(shí)讯壶，實(shí)際上被添加的是該片斷的子節(jié)點(diǎn)，而不是片斷本身湾盗。只觸發(fā)了一次重排伏蚊，而且只訪問了一次實(shí)時(shí)的DOM。
先將元素設(shè)為
display: none（需要1次重排和重繪）格粪，然后對(duì)這個(gè)節(jié)點(diǎn)進(jìn)行100次操作躏吊，最后再恢復(fù)顯示（需要1次重排和重繪）。這樣一來匀借，你就用兩次重新渲染颜阐，取代了可能高達(dá)100次的重新渲染。position屬性為absolute或fixed的元素吓肋，重排的開銷會(huì)比較小凳怨，因?yàn)椴挥每紤]它對(duì)其他元素的影響。只在必要的時(shí)候是鬼，才將元素的
display屬性為可見肤舞，因?yàn)椴豢梢姷脑夭挥绊懼嘏藕椭乩L。另外均蜜，visibility : hidden的元素只對(duì)重繪有影響李剖，不影響重排。使用虛擬
DOM的腳本庫囤耳，比如React等篙顺。使用
window.requestAnimationFrame()、window.requestIdleCallback()這兩個(gè)方法調(diào)節(jié)重新渲染.
