迴流和重繪

本人第一次接觸重繪和迴流也是在一次刷題的時候,那麼我就講一下我對重繪和迴流的理解吧

瞭解瀏覽器渲染過程

1.根據html元素,生成DOM tree
2.根據css樣式表,生成style rules
3.二者結合生成render tree
4.根據位置信息大小等信息,生成layout(迴流)
5.根據顏色等信息,生成pointing(重繪)
6.顯示頁面


那麼咱們瞭解了原理以後,就能看出來幾個簡單的道理,重繪在迴流的後面,那麼發生迴流必定發生重繪,迴流是因爲位置信息產生的,因此位置大小等改變,就會產生迴流,顏色等改變,就會產生重繪

那麼咱們總結一下

• 迴流: 發生在layout 位置 ,當修改屬性__引起頁面佈局變化__,則觸發迴流
• 重繪: 發生在上圖的Painting位置,當修改屬性__不引起頁面佈局變化__,則只觸發重繪

因此,迴流必定發生重繪,重繪不必定迴流

## 引起迴流產生的狀況

• 頁面首次渲染 (初始化)
• DOM樹發生改變(增長刪除節點等)
• Render樹變化(如: padding改變)
• 瀏覽器窗口大小發生變化
• 獲取元素的某些屬性

瞭解了這些大概就知道爲啥要學習重繪和迴流了吧,減小重繪和迴流的同時能夠優化代碼,減小瀏覽器渲染


優化（減小 迴流/重繪 的次數）：

• 儘可能一次性修改節點樣式

• let el = document.getElementById('test');
  // el.style.padding = '5px';
  // el.style.borderLeft = '1px';
  // el.style.borderRight = '2px';
  // 使用 cssText 避免屢次修改
  el.style.cssText += 'border-left:1px; border-right:2px; padding:5px'

• 避免屢次讀取某些屬性

• 將複雜節點元素脫離文檔流 (如:"position:absolute"),下降回流成本

• 將須要屢次修改的元素設置 "display:none"，操做完再顯示（上面說起"display:none"不在render樹內，不觸發迴流重繪）

• 批量修改DOM時, 使用DocumentFragment緩存起來,再一次性插入到指定節點

補充

• CSS 放在頭部，緣由是渲染(render)須要 DOM(HTML) 和CSSOM(CSS) ，放在頭部有助於縮短首次渲染時間
• JS 放在尾部，緣由是JS會阻塞瀏覽器解析，當發現一個外鏈腳本須要下載完後在繼續解析後續的 HTML
• load 事件觸發時，頁面上全部的DOM，樣式表，腳本，圖片都已加載完成