瀏覽器的渲染過程
從上面這個圖上负间，我們可以看到，瀏覽器渲染過程如下：
解析HTML颖杏，生成DOM樹纯陨，解析CSS，生成CSSOM樹
將DOM樹和CSSOM樹結合留储，生成渲染樹(Render Tree)
Layout(回流):根據生成的渲染樹翼抠，進行回流(Layout)，得到節(jié)點的幾何信息（位置获讳，大幸跤薄）
Painting(重繪):根據渲染樹以及回流得到的幾何信息，得到節(jié)點的絕對像素
Display:將像素發(fā)送給GPU丐膝，展示在頁面上量愧。
為了構建渲染樹，瀏覽器主要完成了以下工作：
1.從DOM樹的根節(jié)點開始遍歷每個可見節(jié)點帅矗。
2.對于每個可見的節(jié)點偎肃，找到CSSOM樹中對應的規(guī)則，并應用它們浑此。
3.根據每個可見節(jié)點以及其對應的樣式累颂，組合生成渲染樹。
第一步中凛俱，既然說到了要遍歷可見的節(jié)點紊馏，那么我們得先知道，什么節(jié)點是不可見的蒲犬。不可見的節(jié)點包括
一些不會渲染輸出的節(jié)點朱监，比如script、meta暖哨、link等赌朋。
一些通過css進行隱藏的節(jié)點凰狞。比如display:none篇裁。注意沛慢，利用visibility和opacity隱藏的節(jié)點，還是會顯示在渲染樹上的达布。只有display:none的節(jié)點才不會顯示在渲染樹上团甲。
注意：渲染樹只包含可見的節(jié)點
回流
前面我們通過構造渲染樹，我們將可見DOM節(jié)點以及它對應的樣式結合起來黍聂，可是我們還需要計算它們在設備視口(viewport)內的確切位置和大小躺苦，這個計算的階段就是回流。
為了弄清每個對象在網站上的確切大小和位置产还，瀏覽器從渲染樹的根節(jié)點開始遍歷匹厘，我們可以以下面這個實例來表示：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
我們可以看到，第一個div將節(jié)點的顯示尺寸設置為視口寬度的50%脐区，第二個div將其尺寸設置為父節(jié)點的50%愈诚。而在回流這個階段，我們就需要根據視口具體的寬度牛隅，將其轉為實際的像素值炕柔。（如下圖）
重繪
最終，我們通過構造渲染樹和回流階段媒佣，我們知道了哪些節(jié)點是可見的匕累，以及可見節(jié)點的樣式和具體的幾何信息(位置、大小)默伍，那么我們就可以將渲染樹的每個節(jié)點都轉換為屏幕上的實際像素欢嘿，這個階段就叫做重繪節(jié)點。
何時發(fā)生回流重繪
1.添加或刪除可見的DOM元素
2.元素的位置發(fā)生變化
2.元素的尺寸發(fā)生變化（包括外邊距也糊、內邊框炼蹦、邊框大小、高度和寬度等）
4.內容發(fā)生變化显设，比如文本變化或圖片被另一個不同尺寸的圖片所替代框弛。
5.頁面一開始渲染的時候（這肯定避免不了）
6.瀏覽器的窗口尺寸變化（因為回流是根據視口的大小來計算元素的位置和大小的）
注意：回流一定會觸發(fā)重繪，而重繪不一定會回流
瀏覽器的優(yōu)化機制
現代的瀏覽器都是很聰明的捕捂，由于每次重排都會造成額外的計算消耗瑟枫，因此大多數瀏覽器都會通過隊列化修改并批量執(zhí)行來優(yōu)化重排過程。瀏覽器會將修改操作放入到隊列里指攒，直到過了一段時間或者操作達到了一個閾值慷妙，才清空隊列。但是允悦！當你獲取布局信息的操作的時候膝擂，會強制隊列刷新，比如當你訪問以下屬性或者使用以下方法：
offsetTop、offsetLeft架馋、offsetWidth狞山、offsetHeight
scrollTop、scrollLeft叉寂、scrollWidth萍启、scrollHeight
clientTop、clientLeft屏鳍、clientWidth勘纯、clientHeight
getComputedStyle()
getBoundingClientRect
以上屬性和方法都需要返回最新的布局信息，因此瀏覽器不得不清空隊列钓瞭，觸發(fā)回流重繪來返回正確的值驳遵。因此，我們在修改樣式的時候山涡，最好避免使用上面列出的屬性堤结，他們都會刷新渲染隊列。如果要使用它們佳鳖，最好將值緩存起來霍殴。
減少回流和重繪
最小化重繪和重排
由于重繪和重排可能代價比較昂貴，因此最好就是可以減少它的發(fā)生次數系吩。為了減少發(fā)生次數来庭，我們可以合并多次對DOM和樣式的修改，然后一次處理掉穿挨。
const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
例子中月弛，有三個樣式屬性被修改了，每一個都會影響元素的幾何結構科盛，引起回流帽衙。當然，大部分現代瀏覽器都對其做了優(yōu)化贞绵，因此厉萝，只會觸發(fā)一次重排。但是如果在舊版的瀏覽器或者在上面代碼執(zhí)行的時候榨崩，有其他代碼訪問了布局信息(上文中的會觸發(fā)回流的布局信息)谴垫，那么就會導致三次重排。
因此母蛛，我們可以合并所有的改變然后依次處理翩剪，比如我們可以采取以下的方式
使用cssText
const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';
修改CSS的class
const el = document.getElementById('test');
el.className += ' active';
批量修改DOM
當我們需要對DOM對一系列修改的時候，可以通過以下步驟減少回流重繪次數：
1.使元素脫離文檔流
2.對其進行多次修改
3.將元素帶回到文檔中彩郊。
該過程的第一步和第三步可能會引起回流前弯，但是經過第一步之后蚪缀，對DOM的所有修改都不會引起回流，因為它已經不在渲染樹了恕出。
有三種方式可以讓DOM脫離文檔流：
1.隱藏元素询枚，應用修改，重新顯示
2.使用文檔片段(document fragment)在當前DOM之外構建一個子樹剃根，再把它拷貝回文檔哩盲。
3.將原始元素拷貝到一個脫離文檔的節(jié)點中前方，修改節(jié)點后狈醉，再替換原始的元素。
對于復雜動畫效果,使用絕對定位讓其脫離文檔流
對于復雜動畫效果惠险，由于會經常的引起回流重繪苗傅，因此，我們可以使用絕對定位班巩，讓它脫離文檔流渣慕。否則會引起父元素以及后續(xù)元素頻繁的回流。
css3硬件加速（GPU加速）
比起考慮如何減少回流重繪抱慌，我們更期望的是逊桦，根本不要回流重繪。這個時候抑进，css3硬件加速就閃亮登場啦Ｇ烤！
劃重點：使用css3硬件加速寺渗，可以讓transform匿情、opacity、filters這些動畫不會引起回流重繪 信殊。但是對于動畫的其它屬性炬称，比如background-color這些，還是會引起回流重繪的涡拘，不過它還是可以提升這些動畫的性能玲躯。
