什麼是回流,什麼是重繪,有什麼區別?

2022-05-06 02:03:08 字數 1055 閱讀 9118

在頁面載入時,瀏覽器把獲取到的html**解析成1個dom樹,dom樹里包含了所有html標籤,包括display:none隱藏,還有用js動態新增的元素等。

瀏覽器把所有樣式(使用者定義的css和使用者**)解析成樣式結構體

dom tree 和樣式結構體組合後構建render tree, render tree類似於dom tree,但區別很大,因為render tree能識別樣式,render tree中每個node都有自己的style,而且render tree不包含隱藏的節點(比如display:none的節點,還有head節點),因為這些節點不會用於呈現,而且不會影響呈現的,所以就不會包含到 render tree中。我自己簡單的理解就是dom tree和我們寫的css結合在一起之後,渲染出了render tree。

當render tree中的一部分(或全部)因為元素的規模尺寸,布局,隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流,就是在頁面第一次載入的時候,這時候是一定會發生回流的,因為要構建render tree。在回流的時候,瀏覽器會使渲染樹中受到影響的部分失效,並重新構造這部分渲染樹,完成回流後,瀏覽器會重新繪製受影響的部分到螢幕中,該過程成為重繪。

當render tree中的一些元素需要更新屬性,而這些屬性只是影響元素的外觀,風格,而不會影響布局的,比如background-color。則就叫稱為重繪。

他們的區別很大:

回流必將引起重繪,而重繪不一定會引起回流。比如:只有顏色改變的時候就只會發生重繪而不會引起回流

當頁面布局和幾何屬性改變時就需要回流

比如:新增或者刪除可見的dom元素,元素位置改變,元素尺寸改變——邊距、填充、邊框、寬度和高度,內容改變

擴充套件:瀏覽器的幫忙

所以我們能得知回流比重繪的代價要更高,回流的花銷跟render tree有多少節點需要重新構建有關係

因為這些機制的存在,所以瀏覽器會幫助我們優化這些操作,瀏覽器會維護1個佇列,把所有會引起回流、重繪的操作放入這個佇列,等佇列中的操作到了一定的數量或者到了一定的時間間隔,瀏覽器就會flush佇列,進行乙個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。

自己的優化

什麼是回流,什麼是重繪,有什麼區別?

在頁面載入時,瀏覽器把獲取到的html 解析成1個dom樹,dom樹里包含了所有html標籤,包括display none隱藏,還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體dom tree 和樣式結構體組合後構建render tree,render tr...

什麼是回流,重繪,他們之間有什麼區別?

什麼是回流 當render tree中的一部分 或全部 因為元素的規模尺寸,布局,隱藏等改變而需要重新構建。這就稱為回流 reflow 每個頁面至少需要一次回流,就是在頁面第一次載入的時候,這時候是一定會發生回流的,因為要構建render tree。在回流的時候,瀏覽器會使渲染樹中受到影響的部分失效...

什麼是回流和重繪

當渲染樹中的一部分或者全部因為元素的尺寸 布局 隱藏等改變而需要重新構建的時候,這時候就會發生回流。每個頁面都至少發生一次回流,也就是頁面第一次載入的時候。在回流的時候,瀏覽器會使渲染樹中受到影響的元素部分失效,並重新繪製這個部分的渲染樹,完成回流以後,瀏覽器會重新繪製受到影響的部分元素到螢幕中,這...