什麼是重繪與回流,二者之間的關係是?

2021-10-25 21:15:39 字數 465 閱讀 3838

重繪(repaint):當元素樣式改變而不影響元素在頁面中的位置時,瀏覽器對元素進行更新這就是重繪;

回流(reflow):當元素樣式改變而影響到其在頁面中的位置和大小時,瀏覽器將對頁面重新計算渲染樹,這就是回流

二者之間的關係:發生回流一定會觸發重繪,但是觸發重繪不一定會發生回流;

舉個簡單的例子:

因為元素的顏色的改變會導致元素的樣式改變此時就觸發了重繪,但是其並沒有影響其在頁面的位置和大小所以就沒有觸發回流;

但是元素通過定位或者改變大小導致樣式的改變此時即符合重繪的定義也符合回流的定義;因而即觸發了重繪又觸發了回流;

dom 樣式發生了變化,但沒有影響到頁面布局時,會觸發重繪,而不會觸發回流。

重繪由於 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...