1，瀏覽器的渲染機制

? ? 1、處理HTML形成一個dom樹

? ? 2，處理css形成一個css渲染樹

? ? 3，html和css形成一個dom渲染樹

? ? 4，根據渲染樹進行布局，計算每個節點的屬性?

? ? 5，調用GPU繪制，合成一個圖層，顯示在屏幕上。

? 2，重繪和回流的定義

? ? ? 重繪的是外觀改變、布局不變，例如color的屬性等

? ? ? 回流是布局有所改變或者幾何屬性需要改變稱作回流

? ? ? 重繪不會引起回流，回流會引起重繪

? ? ? 有幾下種情形引起性能的問題

? ? ? ? ?1,當window改變的時候?

? ? ? ? ?2，當字體變化的時候

? ? ? ? ?3，改變和刪除樣式

? ? ? ? ?4，文字改變

? ? ? ? ?5，定位和浮動改變

? ? ? ? ?6，盒模型?

? ? ?1，重繪和回流跟evenloop有一定的關系

? ? ? ?當事件輪詢的微任務執行完成之后，會判斷document是否需要更新，瀏覽器的刷新頻率的60hz,代表16ms才更新一次

? ? ? ?1，然后判斷是否有resize 和sroll的操作，它是16ms才執行一次， 自帶節流額功能

? ? ? ?2，然后判斷是否有media? 事件

? ? ? ?3， 更新動畫，發送事件

? ? ? ?4， 判斷是否有全屏的事件

? ? ? ?5， 執行requestaninateFrame，最新的瀏覽器支持動畫

? ? ? ?6, 執行 inserSectionObserrve,這個屬性的可用于懶加載，在可見的屏幕里進行執行，兼容性不好，safar不支持

? ? ? ?7，更新界面

? ? ?

?3，防止重繪和回流

? ?1，對與animate? 動畫屬性top，left 可以使用transform的transllate ，可以提供gpu加速，防止回流

? ?2，用visibility代替display:none：防止回流

? ?3，使用requestAnimateFrame防止頻率的回流

? ?4，盡量不要使用table,改變一個屬性，可以引起回流

? ?5， 不要把節點的屬性的在for循環里當成變量

? ?6，頻繁運行的動畫變成圖層，例如video

? ?

?

?

轉載于:https://www.cnblogs.com/yayaxuping/p/9700486.html

總結

以上是生活随笔為你收集整理的重绘和回流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。