??

?🎬?江城開朗的豌豆：個(gè)人主頁

?🔥?個(gè)人專欄?:《 VUE 》?《 javaScript 》

?📝?個(gè)人網(wǎng)站?:《 江城開朗的豌豆🫛 》?

???生活的理想，就是為了理想的生活?!

目錄

??? 專欄簡介

?📘? 文章引言

一、回流與重繪是什么

二、如何觸發(fā)

回流觸發(fā)時(shí)機(jī)

重繪觸發(fā)時(shí)機(jī)

瀏覽器優(yōu)化機(jī)制

三、如何減少

?? 寫在最后

---

??? 專欄簡介

????????歡迎來到前端入門之旅！這個(gè)專欄是為那些對Web開發(fā)感興趣、剛剛開始學(xué)習(xí)前端的讀者們打造的。無論你是初學(xué)者還是有一些基礎(chǔ)的開發(fā)者，我們都會(huì)在這里為你提供一個(gè)系統(tǒng)而又親切的學(xué)習(xí)平臺(tái)。我們以問答形式更新，為大家呈現(xiàn)精選的前端知識(shí)點(diǎn)和最佳實(shí)踐。通過深入淺出的解釋概念，并提供實(shí)際案例和練習(xí)，讓你逐步建立起一個(gè)扎實(shí)的基礎(chǔ)。無論是HTML、CSS、JavaScript還是最新的前端框架和工具，我們都將為你提供豐富的內(nèi)容和實(shí)用技巧，幫助你更好地理解并運(yùn)用前端開發(fā)中的各種技術(shù)。

????????同時(shí)，我們也會(huì)關(guān)注最新的前端趨勢和發(fā)展動(dòng)態(tài)。隨著Web技術(shù)的不斷演進(jìn)，前端開發(fā)也在不斷推陳出新。我們會(huì)及時(shí)介紹最新的前端框架、工具和技術(shù)，使你能夠站在前沿，與時(shí)俱進(jìn)。通過掌握最新的前端技術(shù)，你將能夠在競爭激烈的Web開發(fā)領(lǐng)域中有更大的競爭力。

?📘? 文章引言

一、回流與重繪是什么

在HTML中，每個(gè)元素都可以理解成一個(gè)盒子，在瀏覽器解析過程中，會(huì)涉及到回流與重繪：

• 回流：布局引擎會(huì)根據(jù)各種樣式計(jì)算每個(gè)盒子在頁面上的大小與位置

• 重繪：當(dāng)計(jì)算好盒模型的位置、大小及其他屬性后，瀏覽器根據(jù)每個(gè)盒子特性進(jìn)行繪制

具體的瀏覽器解析渲染機(jī)制如下所示：?

• 解析HTML，生成DOM樹，解析CSS，生成CSSOM樹

• 將DOM樹和CSSOM樹結(jié)合，生成渲染樹(Render Tree)

• Layout(回流):根據(jù)生成的渲染樹，進(jìn)行回流(Layout)，得到節(jié)點(diǎn)的幾何信息（位置，大小）

• Painting(重繪):根據(jù)渲染樹以及回流得到的幾何信息，得到節(jié)點(diǎn)的絕對像素

• Display:將像素發(fā)送給GPU，展示在頁面上

在頁面初始渲染階段，回流不可避免的觸發(fā)，可以理解成頁面一開始是空白的元素，后面添加了新的元素使頁面布局發(fā)生改變

當(dāng)我們對?DOM?的修改引發(fā)了?DOM 幾何尺寸的變化（比如修改元素的寬、高或隱藏元素等）時(shí)，瀏覽器需要重新計(jì)算元素的幾何屬性，然后再將計(jì)算的結(jié)果繪制出來

當(dāng)我們對?DOM 的修改導(dǎo)致了樣式的變化（color或background-color），卻并未影響其幾何屬性時(shí)，瀏覽器不需重新計(jì)算元素的幾何屬性、直接為該元素繪制新的樣式，這里就僅僅觸發(fā)了回流

二、如何觸發(fā)

要想減少回流和重繪的次數(shù)，首先要了解回流和重繪是如何觸發(fā)的

回流觸發(fā)時(shí)機(jī)

回流這一階段主要是計(jì)算節(jié)點(diǎn)的位置和幾何信息，那么當(dāng)頁面布局和幾何信息發(fā)生變化的時(shí)候，就需要回流，如下面情況：

• 添加或刪除可見的DOM元素
• 元素的位置發(fā)生變化
• 元素的尺寸發(fā)生變化（包括外邊距、內(nèi)邊框、邊框大小、高度和寬度等）
• 內(nèi)容發(fā)生變化，比如文本變化或圖片被另一個(gè)不同尺寸的圖片所替代
• 頁面一開始渲染的時(shí)候（這避免不了）
• 瀏覽器的窗口尺寸變化（因?yàn)榛亓魇歉鶕?jù)視口的大小來計(jì)算元素的位置和大小的）

還有一些容易被忽略的操作：獲取一些特定屬性的值

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

這些屬性有一個(gè)共性，就是需要通過即時(shí)計(jì)算得到。因此瀏覽器為了獲取這些值，也會(huì)進(jìn)行回流

除此還包括getComputedStyle 方法，原理是一樣的

重繪觸發(fā)時(shí)機(jī)

觸發(fā)回流一定會(huì)觸發(fā)重繪

可以把頁面理解為一個(gè)黑板，黑板上有一朵畫好的小花。現(xiàn)在我們要把這朵從左邊移到了右邊，那我們要先確定好右邊的具體位置，畫好形狀（回流），再畫上它原有的顏色（重繪）

除此之外還有一些其他引起重繪行為：

• 顏色的修改

• 文本方向的修改

• 陰影的修改

瀏覽器優(yōu)化機(jī)制

由于每次重排都會(huì)造成額外的計(jì)算消耗，因此大多數(shù)瀏覽器都會(huì)通過隊(duì)列化修改并批量執(zhí)行來優(yōu)化重排過程。瀏覽器會(huì)將修改操作放入到隊(duì)列里，直到過了一段時(shí)間或者操作達(dá)到了一個(gè)閾值，才清空隊(duì)列

當(dāng)你獲取布局信息的操作的時(shí)候，會(huì)強(qiáng)制隊(duì)列刷新，包括前面講到的offsetTop等方法都會(huì)返回最新的數(shù)據(jù)

因此瀏覽器不得不清空隊(duì)列，觸發(fā)回流重繪來返回正確的值

三、如何減少

我們了解了如何觸發(fā)回流和重繪的場景，下面給出避免回流的經(jīng)驗(yàn)：

• 如果想設(shè)定元素的樣式，通過改變元素的?class?類名 (盡可能在 DOM 樹的最里層)
• 避免設(shè)置多項(xiàng)內(nèi)聯(lián)樣式
• 應(yīng)用元素的動(dòng)畫，使用?position?屬性的?fixed?值或?absolute?值(如前文示例所提)
• 避免使用?table?布局，table?中每個(gè)元素的大小以及內(nèi)容的改動(dòng)，都會(huì)導(dǎo)致整個(gè)?table?的重新計(jì)算
• 對于那些復(fù)雜的動(dòng)畫，對其設(shè)置?position: fixed/absolute，盡可能地使元素脫離文檔流，從而減少對其他元素的影響
• 使用css3硬件加速，可以讓transform、opacity、filters這些動(dòng)畫不會(huì)引起回流重繪
• 避免使用 CSS 的?JavaScript?表達(dá)式

在使用?JavaScript?動(dòng)態(tài)插入多個(gè)節(jié)點(diǎn)時(shí), 可以使用DocumentFragment. 創(chuàng)建后一次插入. 就能避免多次的渲染性能

但有時(shí)候，我們會(huì)無可避免地進(jìn)行回流或者重繪，我們可以更好使用它們

例如，多次修改一個(gè)把元素布局的時(shí)候，我們很可能會(huì)如下操作

const el = document.getElementById('el')
for(let i=0;i<10;i++) {el.style.top  = el.offsetTop  + 10 + "px";el.style.left = el.offsetLeft + 10 + "px";
}

每次循環(huán)都需要獲取多次offset屬性，比較糟糕，可以使用變量的形式緩存起來，待計(jì)算完畢再提交給瀏覽器發(fā)出重計(jì)算請求

// 緩存offsetLeft與offsetTop的值
const el = document.getElementById('el') 
let offLeft = el.offsetLeft, offTop = el.offsetTop// 在JS層面進(jìn)行計(jì)算
for(let i=0;i<10;i++) {offLeft += 10offTop  += 10
}// 一次性將計(jì)算結(jié)果應(yīng)用到DOM上
el.style.left = offLeft + "px"
el.style.top = offTop  + "px"

我們還可避免改變樣式，使用類名去合并樣式

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

使用類名去合并樣式

<style>.basic_style {width: 100px;height: 200px;border: 10px solid red;color: red;}
</style>
<script>const container = document.getElementById('container')container.classList.add('basic_style')
</script>

前者每次單獨(dú)操作，都去觸發(fā)一次渲染樹更改（新瀏覽器不會(huì)），

都去觸發(fā)一次渲染樹更改，從而導(dǎo)致相應(yīng)的回流與重繪過程

合并之后，等于我們將所有的更改一次性發(fā)出

我們還可以通過通過設(shè)置元素屬性display: none，將其從頁面上去掉，然后再進(jìn)行后續(xù)操作，這些后續(xù)操作也不會(huì)觸發(fā)回流與重繪，這個(gè)過程稱為離線操作

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

離線操作后

let container = document.getElementById('container')
container.style.display = 'none'
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'
...（省略了許多類似的后續(xù)操作）
container.style.display = 'block'

?? 寫在最后

請大家不吝賜教,在下方評論或者私信我,十分感謝🙏🙏🙏.

? 認(rèn)為我某個(gè)部分的設(shè)計(jì)過于繁瑣,有更加簡單或者更高逼格的封裝方式

? 認(rèn)為我部分代碼過于老舊,可以提供新的API或最新語法

? 對于文章中部分內(nèi)容不理解

? 解答我文章中一些疑問

? 認(rèn)為某些交互,功能需要優(yōu)化,發(fā)現(xiàn)BUG

? 想要添加新功能,對于整體的設(shè)計(jì),外觀有更好的建議

最后感謝各位的耐心觀看，既然都到這了，點(diǎn)個(gè) 👍贊再走吧！