1. 概念

渲染流程.jpg

• 重排：節(jié)點(diǎn)信息計(jì)算，即根據(jù)渲染樹(shù)計(jì)算每個(gè)節(jié)點(diǎn)的幾何信息（大小及位置）
• 重繪：渲染繪制，即根據(jù)計(jì)算好的信息繪制整個(gè)頁(yè)面，渲染出最終的頁(yè)面
• 瀏覽器渲染頁(yè)面默認(rèn)采用的是流式布局模型（Flow Based Layout），這一點(diǎn)很重要。

2. 導(dǎo)致重排因素

• 頁(yè)面首次渲染
• 瀏覽器窗口大小發(fā)生改變resize
• 元素尺寸或位置發(fā)生改變

var box = document.querySelector('.box');
//下面每一次操作，在瀏覽器沒(méi)有優(yōu)化的情況下，都會(huì)進(jìn)行一次重排
box.style.width = '100px';
box.style.height = '100px';
box.style.margin = 10px;
box.style.padding = "5px";

重排1.png

重排2.png

//不僅牽扯到位置，還牽扯到BFC，從而進(jìn)一步影響重排
box.style.position = "absolute";
box.style.top = "100px";
box.style.left = "100px";
box.style.display = "flex";
box.style.overflow = "hidden";

• 元素內(nèi)容變化（文字?jǐn)?shù)量或圖片大小等等）
• 元素字體大小變化font-size
• 添加或者刪除可見(jiàn)的DOM元素。
• 激活CSS偽類(lèi)（例如：:hover）
• 設(shè)置style屬性
• 查詢(xún)某些屬性或調(diào)用某些方法

//以下屬性沒(méi)有被瀏覽器優(yōu)化，減少獲取次數(shù)
offsetXXX...
clientXXX...
scrollXXX...

//以下方法沒(méi)有被瀏覽器優(yōu)化，減少調(diào)用次數(shù)
scrollIntoView()
scrollIntoViewIfNeeded()
scrollTo()
getComputedStyle()
getBoundingClientRect()

3. 減少重排

//只進(jìn)行一次重排
box.style.cssText = 'width: 100px; height: 100px; margin: 30px; padding: 20px; border: 10px solid red';

//或者直接修改class類(lèi)名
.mybox {
        width: 100px;
        height: 100;
        margin: 30px;
        padding: 20px;
        border: 10px solid red;
}
box.className = 'mybox '

借用其他大佬的總結(jié)：

• 避免設(shè)置大量的style屬性，因?yàn)橥ㄟ^(guò)設(shè)置style屬性改變結(jié)點(diǎn)樣式的話，每一次設(shè)置都會(huì)觸發(fā)一次reflow，所以最好是使用class屬性
• 實(shí)現(xiàn)元素的動(dòng)畫(huà)，它的position屬性，最好是設(shè)為absoulte或fixed，這樣不會(huì)影響其他元素的布局
• 動(dòng)畫(huà)實(shí)現(xiàn)的速度的選擇。比如實(shí)現(xiàn)一個(gè)動(dòng)畫(huà)，以1個(gè)像素為單位移動(dòng)這樣最平滑，但是reflow就會(huì)過(guò)于頻繁，大量消耗CPU資源，如果以3個(gè)像素為單位移動(dòng)則會(huì)好很多。
• 不要使用table布局，因?yàn)閠able中某個(gè)元素旦觸發(fā)了reflow，那么整個(gè)table的元素都會(huì)觸發(fā)reflow。那么在不得已使用table的場(chǎng)合，可以設(shè)置table-layout:auto;或者是table-layout:fixed這樣可以讓table一行一行的渲染，這種做法也是為了限制reflow的影響范圍

參考文獻(xiàn)：
https://blog.csdn.net/cc_together/article/details/105497631
https://zhuanlan.zhihu.com/p/40605154
https://www.cnblogs.com/soyxiaobi/p/9963019.html