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

2021-10-07 23:42:01 字數 530 閱讀 1553

什麼是回流

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

什麼是重繪

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

區別:

他們的區別很大:

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

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

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

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

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

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

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

什麼是回流和重繪

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