2020-4-11 前端達人
做過前端開發的小伙伴就算不是非常理解重排與重繪，但是肯定都聽過這兩個詞。那為什么這兩個東西這么重要？因為他與我們的頁面性能息息相關，今天，我們就來好好研究一下這兩個東西。
瀏覽器的渲染流程
在講解重排和重繪之前，我們有必要說一下瀏覽器的渲染流程。下面是瀏覽器渲染過程中最關鍵的幾個部分。如果想了解完整的瀏覽器渲染流程，推薦大家去閱讀李兵老師的瀏覽器工作原理實踐，需要付費閱讀。后期我也會整理一下再出一篇博客詳細介紹瀏覽器的渲染過程。
JavaScript：一般來說，我們會使用 JavaScript 來實現一些視覺變化的效果。比如用 jQuery 的 animate 函數做一個動畫、對一個數據集進行排序或者往頁面里添加一些 DOM 元素等。當然，除了 JavaScript，還有其他一些常用方法也可以實現視覺變化效果，比如：CSS Animations、Transitions 和 Web Animation API。
樣式計算：此過程是根據匹配選擇器（例如 .headline 或 .nav > .nav__item）計算出哪些元素應用哪些 CSS 規則的過程。從中知道規則之后，將應用規則并計算每個元素的最終樣式。
布局：在知道對一個元素應用哪些規則之后，瀏覽器即可開始計算它要占據的空間大小及其在屏幕的位置。網頁的布局模式意味著一個元素可能影響其他元素，例如 元素的寬度一般會影響其子元素的寬度以及樹中各處的節點，因此對于瀏覽器來說，布局過程是經常發生的。
繪制：繪制是填充像素的過程。它涉及繪出文本、顏色、圖像、邊框和陰影，基本上包括元素的每個可視部分。繪制一般是在多個表面（通常稱為層）上完成的。
合成：由于頁面的各部分可能被繪制到多層，由此它們需要按正確順序繪制到屏幕上，以便正確渲染頁面。對于與另一元素重疊的元素來說，這點特別重要，因為一個錯誤可能使一個元素錯誤地出現在另一個元素的上層。
其中，重排和重繪影響的就是其中的布局和繪制過程。
什么是重排和重繪制
重排：當DOM的變化引發了元素幾何屬性的變化，比如改變元素的寬高，元素的位置，導致瀏覽器不得不重新計算元素的幾何屬性，并重新構建渲染樹，這個過程稱為“重排”。
重繪：完成重排后，要將重新構建的渲染樹渲染到屏幕上，這個過程就是“重繪”。
簡單來說，涉及元素的幾何更新時，叫重排。而只涉及樣式更新而不涉及幾何更新時，叫重繪。對于兩者來說，重排必定引起重繪，但是重繪并不一定引起重排。所以，當涉及重排時，瀏覽器會將上述的步驟再次執行一遍。當只涉及重繪時，瀏覽器會跳過Layout步驟，即：
而如果既不需要重排，也不需要重繪，那么就是下面這樣：
瀏覽器會直接跳到合成階段。顯然，對于頁面性能來說，不重排也不重繪 > 重繪 > 重排。
什么操作會引起重排和重繪
顯然，觸發重排的一般都是幾何因素，這是比較好理解的：
頁面第一次渲染 在頁面發生首次渲染的時候，所有組件都要進行首次布局，這是開銷最大的一次重排
瀏覽器窗口尺寸改變
元素位置和尺寸發生改變的時候
新增和刪除可見元素
內容發生改變（文字數量或圖片大小等等）
元素字體大小變化
還有其他一些操作也可能引發重排
查詢某些屬性或調用某些方法
offset(Top|Left|Width|Height)
scroll(Top|Left|Width|Height)
client(Top|Left|Width|Height)
getComputedStyle()
我們可能不太理解為什么這些操作也能引起重排，這里我先簡單解釋一下。因為現在的瀏覽器已經非常完善了，會自動幫我們做一些優化。當我們用js操作DOM的時候，瀏覽器并不是立馬執行的，而是將操作存儲在一個隊列中。當達到一定數量或者經過一定時間以后瀏覽器再統一的去執行隊列中的操作。那么回到我們剛才的問題，為什么查詢這些屬性也會導致重排？因為當你查詢這些屬性時，瀏覽器就會強制刷新隊列，因為如果不立馬執行隊列中的操作，有可能得到的結果就是錯誤的。所以相當于你強制打斷了瀏覽器的優化流程，引發了重排。下面我們通過一些小例子來進一步理解這段話：
首先我們來一個顯然會引發重排的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#test {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div id="test">
</div>
<button onclick="reflow()">click</button>
<script>
function reflow() {
var div = document.querySelector("#test");
div.style.left = '200px';
}
</script>
</body>
</html>
把時間軸往后拉，可以看到這幾個過程，先簡單介紹一些這些名詞代表的含義：
Recalculate Style：這個過程就是生成CSSOM的過程
Layout：這就是布局階段，即重排的過程
Update Layer Tree：這個階段是更新層樹的過程
Paint：該階段是為每一層準備繪制列表的過程
Composite Layers：該階段是利用繪制列表來生成相應圖層的位圖了，還涉及到合成線程和光柵化，performence面板中的Raster就是光柵化線程池 。
這里只做一個簡單的介紹，對其中內容不太明白的同學可以參考李兵老師的文章或者在我的下一篇介紹瀏覽器渲染過程的文章中會詳細解釋。
那通過這個圖我們可以看到，我們改變了div的left之后就觸發了Layout，即重排的過程。下面我們僅改變div的背景顏色，給大家一個對比。
即不重排也不重繪
說完了重排和重繪，不要忘記我們最開始提到的，最的方式就是跳過重排和重繪階段。你可能會想，什么情況下可以做到這一點?其實這就是我們平時說的GPU加速，具體是如何實現呢？在開發過程中，如果我們使用了某些屬性，瀏覽器會幫助我們將使用了該屬性的div提升到一個單獨的合成層，而在后面的渲染中，提升到該層的div將跳過重排和重繪的操作，直接到合成階段。在stack overflow上有問題提到了這塊內容。我們翻譯一下就是：
下面幾個屬性能讓瀏覽器幫助我們將div提升到一個單獨的合成層：
圖層具有3D或透視變換CSS屬性
使用加速視頻解碼的 video 元素
擁有 3D（WebGL） 上下文或者加速 2D 上下文的 canvas 元素
混合插件（Flash)
對自己的 opacity 做 CSS 動畫或使用一個動畫 webkit 變換的元素
圖層使用加速的CSS過濾器
層具有作為合成層的后代
圖層具有較低z索引的同級元素，該同級元素具有合成層（換句話說，該層在合成層的頂部渲染）
css will-change屬性
最后一點是我加上去的，同時根據文中的內容我們可以知道，css3硬件加速是瀏覽器的行為，所以在不同瀏覽器下可能會有不同的表現形式。下面我們用一個例子來理解一下。這是李兵老師在他的專欄中提出的一個例子，我拿過來借用一下，注意box中的will-change屬性：
<html>
<head>
<title>觀察will-change</title>
<style>
.box {
will-change: transform, opacity;
display: block;
float: left;
width: 40px;
height: 40px;
margin: 15px;
padding: 10px;
border: 1px solid rgb(136, 136, 136);
background: rgb(187, 177, 37);
border-radius: 30px;
transition: border-radius 1s ease-out;
}
body {
font-family: Arial;
}
</style>
</head>
<body>
<div id="controls">
<button id="start">start</button>
<button id="stop">stop</button>
</div>
<div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
<div class="box">旋轉盒子</div>
</div>
<script>
let boxes = document.querySelectorAll('.box');
let boxes1 = document.querySelectorAll('.box1');
let start = document.getElementById('start');
let stop = document.getElementById('stop');
let stop_flag = false
start.addEventListener('click', function () {
stop_flag = false
requestAnimationFrame(render);
})
stop.addEventListener('click', function () {
stop_flag = true
})
let rotate_ = 0
let opacity_ = 0
function render() {
if (stop_flag)
return 0
rotate_ = rotate_ + 6
if (opacity_ > 1)
opacity_ = 0
opacity_ = opacity_ + 0.01
let command = 'rotate(' + rotate_ + 'deg)';
for (let index = 0; index < boxes.length; index++) {
boxes[index].style.transform = command
boxes[index].style.opacity = opacity_
}
requestAnimationFrame(render);
}
</script>
</body>
</html>
————————————————
版權聲明：本文為CSDN博主「溪寧」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38164763/article/details/105406580