2020-4-11 前端達(dá)人
做過前端開發(fā)的小伙伴就算不是非常理解重排與重繪，但是肯定都聽過這兩個(gè)詞。那為什么這兩個(gè)東西這么重要？因?yàn)樗c我們的頁(yè)面性能息息相關(guān)，今天，我們就來好好研究一下這兩個(gè)東西。
瀏覽器的渲染流程
在講解重排和重繪之前，我們有必要說一下瀏覽器的渲染流程。下面是瀏覽器渲染過程中最關(guān)鍵的幾個(gè)部分。如果想了解完整的瀏覽器渲染流程，推薦大家去閱讀李兵老師的瀏覽器工作原理實(shí)踐，需要付費(fèi)閱讀。后期我也會(huì)整理一下再出一篇博客詳細(xì)介紹瀏覽器的渲染過程。
JavaScript：一般來說，我們會(huì)使用 JavaScript 來實(shí)現(xiàn)一些視覺變化的效果。比如用 jQuery 的 animate 函數(shù)做一個(gè)動(dòng)畫、對(duì)一個(gè)數(shù)據(jù)集進(jìn)行排序或者往頁(yè)面里添加一些 DOM 元素等。當(dāng)然，除了 JavaScript，還有其他一些常用方法也可以實(shí)現(xiàn)視覺變化效果，比如：CSS Animations、Transitions 和 Web Animation API。
樣式計(jì)算：此過程是根據(jù)匹配選擇器（例如 .headline 或 .nav > .nav__item）計(jì)算出哪些元素應(yīng)用哪些 CSS 規(guī)則的過程。從中知道規(guī)則之后，將應(yīng)用規(guī)則并計(jì)算每個(gè)元素的最終樣式。
布局：在知道對(duì)一個(gè)元素應(yīng)用哪些規(guī)則之后，瀏覽器即可開始計(jì)算它要占據(jù)的空間大小及其在屏幕的位置。網(wǎng)頁(yè)的布局模式意味著一個(gè)元素可能影響其他元素，例如 元素的寬度一般會(huì)影響其子元素的寬度以及樹中各處的節(jié)點(diǎn)，因此對(duì)于瀏覽器來說，布局過程是經(jīng)常發(fā)生的。
繪制：繪制是填充像素的過程。它涉及繪出文本、顏色、圖像、邊框和陰影，基本上包括元素的每個(gè)可視部分。繪制一般是在多個(gè)表面（通常稱為層）上完成的。
合成：由于頁(yè)面的各部分可能被繪制到多層，由此它們需要按正確順序繪制到屏幕上，以便正確渲染頁(yè)面。對(duì)于與另一元素重疊的元素來說，這點(diǎn)特別重要，因?yàn)橐粋€(gè)錯(cuò)誤可能使一個(gè)元素錯(cuò)誤地出現(xiàn)在另一個(gè)元素的上層。
其中，重排和重繪影響的就是其中的布局和繪制過程。
什么是重排和重繪制
重排：當(dāng)DOM的變化引發(fā)了元素幾何屬性的變化，比如改變?cè)氐膶捀?，元素的位置，?dǎo)致瀏覽器不得不重新計(jì)算元素的幾何屬性，并重新構(gòu)建渲染樹，這個(gè)過程稱為“重排”。
重繪：完成重排后，要將重新構(gòu)建的渲染樹渲染到屏幕上，這個(gè)過程就是“重繪”。
簡(jiǎn)單來說，涉及元素的幾何更新時(shí)，叫重排。而只涉及樣式更新而不涉及幾何更新時(shí)，叫重繪。對(duì)于兩者來說，重排必定引起重繪，但是重繪并不一定引起重排。所以，當(dāng)涉及重排時(shí)，瀏覽器會(huì)將上述的步驟再次執(zhí)行一遍。當(dāng)只涉及重繪時(shí)，瀏覽器會(huì)跳過Layout步驟，即：
而如果既不需要重排，也不需要重繪，那么就是下面這樣：
瀏覽器會(huì)直接跳到合成階段。顯然，對(duì)于頁(yè)面性能來說，不重排也不重繪 > 重繪 > 重排。
什么操作會(huì)引起重排和重繪
顯然，觸發(fā)重排的一般都是幾何因素，這是比較好理解的：
頁(yè)面第一次渲染 在頁(yè)面發(fā)生首次渲染的時(shí)候，所有組件都要進(jìn)行首次布局，這是開銷最大的一次重排
瀏覽器窗口尺寸改變
元素位置和尺寸發(fā)生改變的時(shí)候
新增和刪除可見元素
內(nèi)容發(fā)生改變（文字?jǐn)?shù)量或圖片大小等等）
元素字體大小變化
還有其他一些操作也可能引發(fā)重排
查詢某些屬性或調(diào)用某些方法
offset(Top|Left|Width|Height)
scroll(Top|Left|Width|Height)
client(Top|Left|Width|Height)
getComputedStyle()
我們可能不太理解為什么這些操作也能引起重排，這里我先簡(jiǎn)單解釋一下。因?yàn)楝F(xiàn)在的瀏覽器已經(jīng)非常完善了，會(huì)自動(dòng)幫我們做一些優(yōu)化。當(dāng)我們用js操作DOM的時(shí)候，瀏覽器并不是立馬執(zhí)行的，而是將操作存儲(chǔ)在一個(gè)隊(duì)列中。當(dāng)達(dá)到一定數(shù)量或者經(jīng)過一定時(shí)間以后瀏覽器再統(tǒng)一的去執(zhí)行隊(duì)列中的操作。那么回到我們剛才的問題，為什么查詢這些屬性也會(huì)導(dǎo)致重排？因?yàn)楫?dāng)你查詢這些屬性時(shí)，瀏覽器就會(huì)強(qiáng)制刷新隊(duì)列，因?yàn)槿绻涣ⅠR執(zhí)行隊(duì)列中的操作，有可能得到的結(jié)果就是錯(cuò)誤的。所以相當(dāng)于你強(qiáng)制打斷了瀏覽器的優(yōu)化流程，引發(fā)了重排。下面我們通過一些小例子來進(jìn)一步理解這段話：
首先我們來一個(gè)顯然會(huì)引發(fā)重排的操作
<!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>
把時(shí)間軸往后拉，可以看到這幾個(gè)過程，先簡(jiǎn)單介紹一些這些名詞代表的含義：
Recalculate Style：這個(gè)過程就是生成CSSOM的過程
Layout：這就是布局階段，即重排的過程
Update Layer Tree：這個(gè)階段是更新層樹的過程
Paint：該階段是為每一層準(zhǔn)備繪制列表的過程
Composite Layers：該階段是利用繪制列表來生成相應(yīng)圖層的位圖了，還涉及到合成線程和光柵化，performence面板中的Raster就是光柵化線程池 。
這里只做一個(gè)簡(jiǎn)單的介紹，對(duì)其中內(nèi)容不太明白的同學(xué)可以參考李兵老師的文章或者在我的下一篇介紹瀏覽器渲染過程的文章中會(huì)詳細(xì)解釋。
那通過這個(gè)圖我們可以看到，我們改變了div的left之后就觸發(fā)了Layout，即重排的過程。下面我們僅改變div的背景顏色，給大家一個(gè)對(duì)比。
即不重排也不重繪
說完了重排和重繪，不要忘記我們最開始提到的，最的方式就是跳過重排和重繪階段。你可能會(huì)想，什么情況下可以做到這一點(diǎn)?其實(shí)這就是我們平時(shí)說的GPU加速，具體是如何實(shí)現(xiàn)呢？在開發(fā)過程中，如果我們使用了某些屬性，瀏覽器會(huì)幫助我們將使用了該屬性的div提升到一個(gè)單獨(dú)的合成層，而在后面的渲染中，提升到該層的div將跳過重排和重繪的操作，直接到合成階段。在stack overflow上有問題提到了這塊內(nèi)容。我們翻譯一下就是：
下面幾個(gè)屬性能讓瀏覽器幫助我們將div提升到一個(gè)單獨(dú)的合成層：
圖層具有3D或透視變換CSS屬性
使用加速視頻解碼的 video 元素
擁有 3D（WebGL） 上下文或者加速 2D 上下文的 canvas 元素
混合插件（Flash)
對(duì)自己的 opacity 做 CSS 動(dòng)畫或使用一個(gè)動(dòng)畫 webkit 變換的元素
圖層使用加速的CSS過濾器
層具有作為合成層的后代
圖層具有較低z索引的同級(jí)元素，該同級(jí)元素具有合成層（換句話說，該層在合成層的頂部渲染）
css will-change屬性
最后一點(diǎn)是我加上去的，同時(shí)根據(jù)文中的內(nèi)容我們可以知道，css3硬件加速是瀏覽器的行為，所以在不同瀏覽器下可能會(huì)有不同的表現(xiàn)形式。下面我們用一個(gè)例子來理解一下。這是李兵老師在他的專欄中提出的一個(gè)例子，我拿過來借用一下，注意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">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</div>
<div class="box">旋轉(zhuǎn)盒子</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>
————————————————
版權(quán)聲明：本文為CSDN博主「溪寧」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38164763/article/details/105406580
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.cqzjtgb.com