重繪、回流

CoreDump 發布于2019-08-23 14:46 / 3047人閱讀

摘要：重繪回流首先了解頁面的呈現流程瀏覽器把獲取到的代碼解析成一個樹，中的每個都是樹的個節點，根節點就是對象。重繪與回流的特征當中的一些元素的外觀風格等不會影響布局的屬性改變，比如，這就稱為重繪。注重繪不一定會引起回流，回流一定引起重繪。

重繪、回流 首先了解頁面的呈現流程

瀏覽器把獲取到的HTML代碼解析成一個DOM樹，HTML中的每個tag都是DOM樹的1個節點，根節點就是document對象（html tag）。用firebug或者IE Develop Toolbar等工具可看到DOM樹，包括display:none隱藏，還有js動態添加的元素；

瀏覽器把所有樣式（主要包括css和瀏覽器的樣式設置）解析成樣式結構體。在解析過程中會去掉瀏覽器不能識別的樣式，比如IE會去掉-moz開頭的樣式，Firefox會去掉_開頭的樣式；

DOM tree 和樣式結構體結合后構建呈現樹（render tree）。render tree中每個node都有自己的style，而render tree不包含隱藏的節點（比如display:none的節點，還有head節點），這些節點不會用于呈現，也不影響呈現，所以就不會包含在render tree中。（visibility:hidden隱藏的元素還會包含在render tree中，因為會影響布局（layout），會占有空間。根據CSS2的標準，render tree中的每個節點都稱為box（Box dimensions），box的所有屬性：width,height,margin,padding,left,top,border等；

render tree構建完畢后，瀏覽器根據render tree來繪制頁面。

重繪與回流的特征

當render tree中的一些元素的外觀、風格等不會影響布局的屬性改變，比如bachground-color，這就稱為重繪。

當render tree中的一部分（或全部）因為元素的規模尺寸、布局、隱藏等改變而需要重新構建，這就稱為回流。每個頁面在第一次加載的時候就回流了一次。

注：重繪不一定會引起回流，回流一定引起重繪。任何對render tree中元素的操作都會引起回流或重繪。

如何減少回流、重繪

當元素的幾個樣式同時改變時定義一個新的className，不要一個一個改變元素的樣式屬性；

使用documentfragment或div等元素進行緩存操作；

先display:none隱藏元素，然后對元素進行所有操作，最后再顯示該元素；

不要經常訪問會引起瀏覽器flush隊列的屬性，如果想要訪問先讀取到變量中進行緩存；

會引起瀏覽器flush隊列的屬性：

offsetTop, offsetLeft, offsetWidth, offsetHeight  
 scrollTop/Left/Width/Height   
 clientTop/Left/Width/Height  
 width,height  
 請求了getComputedStyle(), 或者 ie的 currentStyle

讓元素脫離動畫流，減少回流的render tree的規模；

  $("#block1").animate({left:50});  
  $("#block2").animate({marginLeft:50});

盡可能在DOM樹的最末端改變class（可限制回流的范圍）；

避免設置多層內聯樣式（將樣式合并在一個外部類，僅產生一次回流）；

動畫效果應用到position屬性為absolute或flex的元素上；

避免使用table數據；

避免使用CSS的JavaScript表達式。

GPU云服務器云服務器回流js 服務器回流重繪重繪嗎

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

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

瀏覽器的回流和重繪及其優化方式

摘要：何時發生有大量的用戶行為以及潛在的改變會觸發回流。這樣就會讓多次的回流重繪變成一次回流重繪。因為上的操作不會引發回流和重繪。參考文章回流與重繪性能讓變慢參考文章瀏覽器的重繪與重排推薦了解的知識：基本的HTML，基本的JavaScript，以及一些css工作原理方面的知識瀏覽器的渲染原理 css的加載和解析不會阻塞html文檔的解析 css的解析會阻塞js的執行，必須等到CSSOM...

hearaway 2019-08-01 17:39 評論0 收藏0
頁面重構和回流

摘要：回流當元素的布局大小規模和顯示方式發生改變時，觸發的瀏覽器行為叫回流。而且，每個頁面都會在第一次加載時觸發回流。注意回流必將引起重繪，而重繪不一定伴隨回流。重繪回流對的操作對不同的屬性操作，影響不一樣。在了解什么是重構和回流之前，我們應該先看看瀏覽器是怎么渲染的？瀏覽器的渲染過程： 1.處理HTML腳本，生成DOM樹（DOM樹里包含所有的HTML標簽，包括display:none和...

leejan97 2019-08-02 16:02 評論0 收藏0
頁面重構和回流

摘要：回流當元素的布局大小規模和顯示方式發生改變時，觸發的瀏覽器行為叫回流。而且，每個頁面都會在第一次加載時觸發回流。注意回流必將引起重繪，而重繪不一定伴隨回流。重繪回流對的操作對不同的屬性操作，影響不一樣。在了解什么是重構和回流之前，我們應該先看看瀏覽器是怎么渲染的？瀏覽器的渲染過程： 1.處理HTML腳本，生成DOM樹（DOM樹里包含所有的HTML標簽，包括display:none和...

zeyu 2019-08-30 14:17 評論0 收藏0
頁面渲染性能控制-重繪與回流

摘要：重繪只涉及樣式的改變，不涉及到布局。當獲取一些屬性時，瀏覽器為了獲得正確的值也會觸發回流。避免多次讀取等屬性。將復雜的元素絕對定位或固定定位，使它脫離文檔流。瀏覽器解析代碼過程頁面的顯示過程分為以下幾個階段：生成DOM樹(包括display:none的節點) 在DOM樹的基礎上根據節點的集合屬性(margin,padding,width,height等)生成render樹(不包...

Noodles 2019-08-30 11:13 評論0 收藏0
頁面渲染性能控制-重繪與回流

摘要：重繪只涉及樣式的改變，不涉及到布局。當獲取一些屬性時，瀏覽器為了獲得正確的值也會觸發回流。避免多次讀取等屬性。將復雜的元素絕對定位或固定定位，使它脫離文檔流。瀏覽器解析代碼過程頁面的顯示過程分為以下幾個階段：生成DOM樹(包括display:none的節點) 在DOM樹的基礎上根據節點的集合屬性(margin,padding,width,height等)生成render樹(不包...

cooxer 2019-08-23 18:12 評論0 收藏0
一次性弄懂回流和重繪

摘要：所以由此來看重繪不一定導致回流，回流一定會導致重繪前面我們說回流和重繪是會對進行修改，會消耗性能，所以我們要盡可能減少回流和重繪的次數。瀏覽器自己也清楚，如果每次操作都即時地反饋一次回流或重繪，那么性能上來說是扛不住的。回流（Reflow）重繪（Repaint）什么時候會觸發回流或重繪呢？當我們對dom 進行修改當時候會引發它外觀（樣式）上的改變時，就會觸發回流或重繪。這個過程本...

JerryWangSAP 2019-08-23 14:56 評論0 收藏0