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

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

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

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

改變 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à)會(huì)去觸發(fā)事件，所以 resize和 scroll事件也是至少 16ms 才會(huì)觸發(fā)一次，并且自帶節(jié)流功能。判斷是否觸發(fā)了 media query更新動(dòng)畫(huà)并且發(fā)送事件判斷是否有全屏操作事件執(zhí)行 requestAnimationFrame回調(diào)執(zhí)行 IntersectionObserver回調(diào)，該方法用于判斷元素是否可見(jiàn)，可以用于懶加載上，但是兼容性不好更新界面以上就是一幀中可能會(huì)做的事情。如果在一幀中有空閑時(shí)間，就會(huì)去執(zhí)行 requestIdleCallback回調(diào)。

猜你喜歡：

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

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

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

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