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

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

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

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

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

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

猜你喜歡：

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

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

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

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