回流和重繪

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

重繪（repaint）當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀、風格，而不會影響布局，這稱為重繪。

回流必將引起重繪，重繪不一定引起回流。

任何對render tree中元素的操作都會引起回流或重繪。

1、新增、刪除元素（回流+重繪）

2、隱藏元素。display（回流+重繪）visibility（重繪）

3、使用者的操作，比如改變瀏覽器的大小，改變瀏覽器的字型大小（回流+重繪）

4、對style的操作。對不同屬性的操作，影響不同。

回流和重繪

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

回流和重繪

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

回流和重繪

瀏覽器使用流式布局 render tree dom 瀏覽器把html解析成dom cssom 把css解析成cssom 當randertree中部分或全部元素的尺寸結構或某些屬性發生改變時，瀏覽器重新渲染部分或全部文件的過程稱為回流，每個頁面至少發生一次回流，就是在第一次載入的時候 會導致回流的操作...