回流和重繪

2021-09-25 17:36:30 字數 503 閱讀 4218

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

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

dom tree 和樣式結構體組合後構建render tree(渲染樹),然後根據渲染樹進行布局,最後呼叫gpu進行繪製,顯示在螢幕上。

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

回流和重繪

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

回流和重繪

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

回流和重繪

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