帶你重新認識回流和重繪

2021-09-10 02:42:06 字數 324 閱讀 4644

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

部分元素到螢幕中,這個過程就是重繪。

什麼時候會發生回流?

1、新增或者刪除可見的dom元素的時候

2、元素的位置發生改變

3、元素尺寸改變

4、內容改變

5、頁面第一次渲染的時候

回流和重繪

在頁面載入時,瀏覽器把獲取到的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...

回流和重繪

回流 reflow 當render tree中的一部分 或全部 因為元素的規模尺寸 布局 隱藏等改變而需要重新構建,這就稱為回流。每個頁面至少需要回流一次,就是在頁面第一次載入的時候。重繪 repaint 當render tree中的一些元素需要更新屬性,而這些屬性只是影響元素的外觀 風格,而不會影...