本人第一次接觸重繪和回流也是在一次刷題的時候,那麼我就講一下我對重繪和回流的理解吧
1.根據html元素,生成dom tree
2.根據css樣式表,生成style rules
3.兩者結合生成render tree
4.根據位置資訊大小等資訊,生成layout(回流)
5.根據顏色等資訊,生成pointing(重繪)
6.顯示頁面
那麼我們了解了原理之後,就能看出來幾個簡單的道理,重繪在回流的後面,那麼發生回流一定發生重繪,回流是由於位置資訊產生的,所以位置大小等改變,就會產生回流,顏色等改變,就會產生重繪
所以,回流一定發生重繪,重繪不一定回流
## 引發回流產生的情況
了解了這些大概就知道為啥要學習重繪和回流了吧,減少重繪和回流的同時可以優化**,減少瀏覽器渲染
優化（減少 回流/重繪 的次數）：
回流和重繪
在頁面載入時，瀏覽器把獲取到的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中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀 風格，而不會影...