更新時(shí)間:2022-06-29 來(lái)源:黑馬程序員 瀏覽量:
重繪(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ū)別
前端自學(xué)好還是報(bào)培訓(xùn)班學(xué)習(xí)好?
2022-06-29web前端培訓(xùn):移動(dòng)web離線(xiàn)應(yīng)用
2022-06-272022年web前端開(kāi)發(fā)學(xué)習(xí)路線(xiàn)圖-黑馬程序員
2022-06-23什么是復(fù)合選擇器?CSS 的復(fù)合選擇器
2022-06-14HTML5常用的語(yǔ)義化標(biāo)簽【語(yǔ)義化布局的優(yōu)點(diǎn)】
2022-06-10什么是Laravel框架?Laravel框架的特點(diǎn)
2022-06-10