前端性能優化——回流與重繪

endiat 發布于2019-08-02 12:04 / 1302人閱讀

摘要：前言最近在研究，接著就研究回顧起回流與重繪了。回流與重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。注意回流必將引起重繪，而重繪不一定會引起回流。

前言

最近在研究virtual dom，接著就研究回顧起回流（reflow）與重繪（repaint）了。

回流與重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。下面我是我稍做的整理：

瀏覽器渲染流程

在理解這兩個概念之前，我們先來看看瀏覽器渲染的工作流程。這里以webkit渲染引擎為例

瀏覽器請求到html文檔后，將html解析成dom Tree

css被解析成css style rules

解析完成后，將結合dom Tree和style rules構造render tree

瀏覽器計算render tree中每個渲染對象的位置和大小，即布局（layout）

最后進行繪制（painting）

回流與重繪

回流（reflow）

當元素的規模尺寸、布局、隱藏等改變，而導致render tree的一部分(或全部)重新構建，即稱為回流。每個頁面至少進過一次回流，就在頁面第一次加載的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。

重繪（repaint）

當render tree中的一些元素需要更新屬性，這些屬性只影響元素的外觀，風格，而不會影響元素尺寸、布局、隱藏的，比如background-color，就叫重繪。

注意：回流必將引起重繪，而重繪不一定會引起回流。

回流的發生

可見元素尺寸的改變，如width、height、margin、padding等屬性改變引起尺寸的變化

window resize事件的觸發

元素display屬性的改變

元素位置的改變

等等

性能優化

回流與重繪非常影響web性能，因為每一次html和css的重新解析然后再構建成render tree，都需要經過大量的計算，這個過程是很耗時間耗性能的。如何減少呢？建議

頁面元素適當定高，如img的夾在在文檔流中占據的空間從0到完全加載，會產生頻繁的重繪

減少dom的深度，可以減少解析器耗時

盡量簡化css

復雜的動畫，可以使其元素脫離文檔流，使用position:absolute或者position:fixed，以減少對父元素的影響

當然，這里列舉的并不是全部的方法，若你有更好的建議，也希望一起分享出來

參考文檔

https://kb.cnblogs.com/page/1...
https://www.html5rocks.com/zh...

云服務器 GPU云服務器前端性能優化前端開發性能優化性能優化前端優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53310.html

前端性能優化——回流與重繪

摘要：前言最近在研究，接著就研究回顧起回流與重繪了。回流與重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。注意回流必將引起重繪，而重繪不一定會引起回流。前言最近在研究virtual dom，接著就研究回顧起回流（reflow）與重繪（repaint）了。回流與重繪，好像大家都很熟悉的樣子，但是要具體來說說，又說不出什么來。下面我是我稍做的整理：瀏覽器渲染流程在理解這...

Michael_Lin 2019-08-26 13:26 評論0 收藏0
前端性能之回流與重繪(reflow && repaint)

摘要：寫在金三銀四之際。一個節點觸發了，瀏覽器會檢查中其他所有節點的顯示方式一個節點觸發了會導致它的祖先節點，后代節點以及在它之后的節點全部。對性能的影響大于。解決方式控制我們無力去改變，對性能損害的程度，我們能做的只有減少它們發生的次數。寫在金三銀四之際。因為種種原因想要謀求新的發展，不得已翻起了塵封已久的高程書；寫起了各種經典CSS布局；回顧起記憶略顯模糊的幾個項目。感慨著太多太多...

ytwman 2019-08-22 15:21 評論0 收藏0
JavaScript：回流（重排）與重繪

摘要：回流也被稱為重排，其實從字面上來看，重排更容易讓人形象易懂即重新排版整個頁面。重繪當頁面元素樣式改變不影響元素在文檔流中的位置時如，，，瀏覽器只會將新樣式賦予元素并進行重新繪制操作。你真的了解回流和重繪嗎簡單先了解一下瀏覽器的渲染過程（圖片來自于網絡） showImg(https://segmentfault.com/img/bVbaC2e?w=624&h=289); 瀏覽器生成渲染...

Jioby 2019-08-26 13:34 評論0 收藏0
求索：GSAP的動畫快于jQuery嗎？/ 續 V1.1

摘要：本文是求索的動畫快于嗎為何的續文。沒有集中繪制，每個都在一個事件回調函數上下文中處理，有多少個就有多少個上下文有集中繪制。測試過程中為了比較好的效果用了隨機數。本文是求索：GSAP的動畫快于jQuery嗎？為何？的續文。GSAP是一個js動畫插件，它聲稱20x faster than jQuery，是什么讓它這么快呢？每當有這樣的問題的時候，我們可以通過以下步驟來...

Tecode 2019-08-21 12:09 評論0 收藏0