一.瀏覽器的渲染過程：
1.渲染圖：
2.瀏覽器渲染過程：
（1）解析HTML，生成DOM樹，解析CSS，生成CSSOM樹
（2）將DOM樹和CSSOM樹結合，生成渲染樹(Render Tree)
（3）Layout(回流，重排):根據生成的渲染樹，進行回流(Layout)，得到節點的幾何信息（位置，大小）
（4）Painting(重繪):根據渲染樹以及回流得到的幾何信息，得到節點的絕對像素
（5）Display:將像素發送給GPU，展示在頁面上
二.生成渲染樹：
1.生成圖：
2.為了構建渲染樹，瀏覽器主要完成了以下工作：
（1）從DOM樹的根節點開始遍歷每個可見節點
（2）對於每個可見的節點，找到CSSOM樹中對應的規則，並應用它們
（3）根據每個可見節點以及其對應的樣式，組合生成渲染樹。
3.不可見的節點包括：
（1）一些不會渲染輸出的節點，比如script、meta、link等
（2）一些通過css進行隱藏的節點。比如display:none。注意，利用visibility和opacity隱藏的節點，還是會顯示在渲染樹上的。只有display:none的節點才不會顯示在渲染樹上
（3）注意：渲染樹只包含可見的節點
DOM樹和渲染樹的區別
三.回流（重排）：
1.回流的概念：
將可見DOM節點以及它對應的樣式結合起來，可是我們還需要計算它們在設備視口(viewport)內的確切位置和大小，這個計算的階段就是回流
四.重繪：
1.重繪概念：
我們通過構造渲染樹和回流階段，我們知道了哪些節點是可見的，以及可見節點的樣式和具體的幾何信息(位置、大小)，
那么我們就可以將渲染樹的每個節點都轉換為屏幕上的實際像素，這個階段就叫做重繪節點
2.何時發生回流重繪：
（1）回流這一階段主要是計算節點的位置和幾何信息，那么當頁面布局和幾何信息發生變化的時候，就需要回流
比如以下情況：
a.添加或刪除可見的DOM元素
b.元素的位置發生變化
c.元素的尺寸發生變化（包括外邊距、內邊框、邊框大小、高度和寬度等）
d.內容發生變化，比如文本變化或圖片被另一個不同尺寸的圖片所替代
e.頁面一開始渲染的時候（這肯定避免不了）
f.瀏覽器的窗口尺寸變化（因為回流是根據視口的大小來計算元素的位置和大小的）
（2）回流一定會觸發重繪，而重繪不一定會回流
（3）根據改變的范圍和程度，渲染樹中或大或小的部分需要重新計算，有些改變會觸發整個頁面的重排，比如，滾動條出現的時候或者修改了根節點
五.瀏覽器的優化機制：
1.優化機制：
（1）由於每次重排都會造成額外的計算消耗，因此大多數瀏覽器都會通過隊列化修改並批量執行來優化重排過程。瀏覽器會將修改操作放入到隊列里，直到過了一段時間或者操作達到了一個閾值，才清空隊列
（2）當你獲取布局信息的操作的時候，會強制隊列刷新，比如當你訪問以下屬性或者使用以下方法：
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect
（3）以上屬性和方法都需要返回最新的布局信息，因此瀏覽器不得不清空隊列，觸發回流重繪來返回正確的值。因此，我們在修改樣式的時候，最好避免使用上面列出的屬性，他們都會刷新渲染隊列。如果要使用它們，最好將值緩存起來
六.減少回流和重繪:
1.最小化重繪和重排:
（1）由於重繪和重排可能代價比較昂貴，因此最好就是可以減少它的發生次數。為了減少發生次數，我們可以合並多次對DOM和樣式的修改，然后一次處理掉
（2）代碼例子：
const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
（3）例子中，有三個樣式屬性被修改了，每一個都會影響元素的幾何結構，引起回流。當然，大部分現代瀏覽器都對其做了優化，因此，只會觸發一次重排。但是如果在舊版的瀏覽器或者在上面代碼執行的時候，有其他代碼訪問了布局信息(上文中的會觸發回流的布局信息)，那么就會導致三次重排
（4）因此，我們可以合並所有的改變然后依次處理，比如我們可以采取以下的方式：
a、使用cssText
const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';
b、修改CSS的class
const el = document.getElementById('test');
el.className += ' active';
2.批量修改DOM：
（1）當我們需要對DOM對一系列修改的時候，可以通過以下步驟減少回流重繪次數：
a.使元素脫離文檔流
b.對其進行多次修改
c.將元素帶回到文檔中
該過程的第一步和第三步可能會引起回流，但是經過第一步之后，對DOM的所有修改都不會引起回流，因為它已經不在渲染樹了
（2）有三種方式可以讓DOM脫離文檔流：
a.隱藏元素，應用修改，重新顯示
b.使用文檔片段(document fragment)在當前DOM之外構建一個子樹，再把它拷貝回文檔
c.將原始元素拷貝到一個脫離文檔的節點中，修改節點后，再替換原始的元素
（3）示例代碼：
function appendDataToElement(appendToElement, data) {
let li;
for (let i = 0; i < data.length; i++) {
li = document.createElement('li');
li.textContent = 'text';
appendToElement.appendChild(li);
}
}
const ul = document.getElementById('list');
appendDataToElement(ul, data);
（4）如果我們直接這樣執行的話，由於每次循環都會插入一個新的節點，會導致瀏覽器回流一次。
我們可以使用這三種方式進行優化：
a.隱藏元素，應用修改，重新顯示:
這個會在展示和隱藏節點的時候，產生兩次重繪：
function appendDataToElement(appendToElement, data) {
let li;
for (let i = 0; i < data.length; i++) {
li = document.createElement('li');
li.textContent = 'text';
appendToElement.appendChild(li);
}
}
const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';
b.使用文檔片段(document fragment)在當前DOM之外構建一個子樹，再把它拷貝回文檔：
const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
ul.appendChild(fragment);
c.將原始元素拷貝到一個脫離文檔的節點中，修改節點后，再替換原始的元素：
const ul = document.getElementById('list');
const clone = ul.cloneNode(true);
appendDataToElement(clone, data);
ul.parentNode.replaceChild(clone, ul);
3.避免觸發同步布局事件
4.對於復雜動畫效果，使用絕對定位讓其脫離文檔流：
對於復雜動畫效果，由於會經常的引起回流重繪，因此，我們可以使用絕對定位，讓它脫離文檔流。否則會引起父元素以及后續元素頻繁的回流
5.css3硬件加速（GPU加速）：
（1）使用css3硬件加速，可以讓transform、opacity、filters這些動畫不會引起回流重繪 。但是對於動畫的其它屬性，比如background-color這些，還是會引起回流重繪的，不過它還是可以提升這些動畫的性能
（2）如何使用：
常見的觸發硬件加速的css屬性：
transform
opacity
filters
Will-change
（3）使用css3硬件加速，可以讓transform、opacity、filters這些動畫不會引起回流重繪。
對於動畫的其它屬性，比如background-color這些，還是會引起回流重繪的，不過它還是可以提升這些動畫的性能
（4）如果你為太多元素使用css3硬件加速，會導致內存占用較大，會有性能問題。
在GPU渲染字體會導致抗鋸齒無效。這是因為GPU和CPU的算法不同。因此如果你不在動畫結束的時候關閉硬件加速，會產生字體模糊
參考：https://blog.csdn.net/weixin_39676449/article/details/85253905