重繪和回流可能會導(dǎo)致哪些性能問題？【web前端】

重繪(Repaint)和回流(Reflow)是我們在頁面優(yōu)化的過程中需要著重關(guān)注的問題，重繪和回流渲染步驟中的一小節(jié)，但是這兩個(gè)步驟對于性能影響很大。本節(jié)我們來看看重繪和回流過程中可能會導(dǎo)致性能問題。

重繪是當(dāng)節(jié)點(diǎn)需要更改外觀而不會影響布局的，比如改變 color就叫稱為重繪回流是布局或者幾何屬性需要改變就稱為回流?；亓鞅囟〞l(fā)生重繪，重繪不一定會引發(fā)回流。回流所需的成本比重繪高的多，改變深層次的節(jié)點(diǎn)很可能導(dǎo)致父節(jié)點(diǎn)的一系列回流。

所以以下幾個(gè)動作可能會導(dǎo)致性能問題：

改變 window 大小改變字體添加或刪除樣式文字改變定位或者浮動盒模型很多人不知道的是，重繪和回流其實(shí)和 Event loop 有關(guān)。

當(dāng) Event loop 執(zhí)行完 Microtasks 后，會判斷 document 是否需要更新。因?yàn)闉g覽器是 60Hz 的刷新率，每 16ms 才會更新一次。然后判斷是否有 resize或者 scroll，有的話會去觸發(fā)事件，所以 resize和 scroll事件也是至少 16ms 才會觸發(fā)一次，并且自帶節(jié)流功能。判斷是否觸發(fā)了 media query更新動畫并且發(fā)送事件判斷是否有全屏操作事件執(zhí)行 requestAnimationFrame回調(diào)執(zhí)行 IntersectionObserver回調(diào)，該方法用于判斷元素是否可見，可以用于懶加載上，但是兼容性不好更新界面以上就是一幀中可能會做的事情。如果在一幀中有空閑時(shí)間，就會去執(zhí)行 requestIdleCallback回調(diào)。

猜你喜歡：

Cookie、sessionStorage、localStorage的區(qū)別

網(wǎng)頁性能優(yōu)化方法有哪些？

前端開發(fā)工程師：優(yōu)化圖片加載和提升用戶體驗(yàn)

黑馬程序員前端與移動開發(fā)工程師培訓(xùn)