聊天室原始碼開發，如何實現前端渲染迴流與重排問題的優化？

前言

今天一起看一下聊天室原始碼前端是如何渲染頁面的，並看一下修改程式碼會對頁面渲染帶來的影響，帶著問題一起尋找優化的方案~

一、聊天室原始碼前端是如何進行介面渲染的？

不同的渲染引擎的具體做法稍有差異，但是大體流程都是差不多的，下面以 chrome渲染引擎 的 渲染流程來說明：

上圖展示的流程是：

1、獲取 HTML ⽂件並進⾏解析，生成一棵 DOM 樹（DOM Tree）

2、解析 HTML 的同時也會解析 CSS，⽣成樣式規則（Style Rules）

3、根據 DOM 樹和樣式規則，生成一棵渲染樹（Render Tree）

4、進行佈局（Layout）(重排)，即為每個節點分配⼀個在螢幕上應顯示的確切座標位置

5、進⾏繪製（Paint）(重繪)，遍歷渲染樹節點，調⽤ GPU(圖形處理器) 將元素呈現出來

二、聊天室原始碼前端渲染的重繪(repaint)和重排(迴流reflow)是什麼?

1. 重排

重排是指部分或整個渲染樹需要重新分析，並且節點的尺⼨需要重新計算。
表現為 重新⽣成佈局，重新排列元素。

2. 重繪

重繪是由於聊天室原始碼節點的⼏何屬性發⽣改變，或由於樣式發⽣改變（例如：改變元素背景⾊）。
表現為某些元素的外觀被改變。或者重排後, 進行重新繪製!

3. 兩者的關係

重繪不⼀定會出現重排，重排必定會觸發重繪。

聊天室原始碼每個頁面至少需要一次迴流+重繪。(初始化渲染)
重排和重繪的代價都很⾼昂，頻繁重排重繪, 會破壞⽤戶體驗、讓介面顯示變遲緩。
我們需要儘可能避免頻繁觸發重排和重繪, 尤其是重排

4. 何時會觸發重排？

• 新增或者刪除可見的DOM元素；
• 元素位置改變；
• 元素尺寸改變——邊距、填充、邊框、寬度和高度
• 聊天室原始碼內容改變——比如文字改變或者圖片大小改變而引起的計算值寬度和高度改變； 頁面渲染初始化；
  -前端視窗尺寸改變——resize事件發生時；

三、如何優化聊天室原始碼前端頁面渲染效能？

站在重繪重排角度, 我們應該如何優化頁面渲染效能呢？

主要有幾大方式來避免：

• 集中修改聊天室原始碼樣式 (這樣可以儘可能利用瀏覽器的優化機制, 一次重排重繪就完成渲染)
• 儘量避免在遍歷迴圈中, 進行元素 offsetTop 等樣式值的獲取操作, 會強制瀏覽器重新整理佇列, 進行渲染
• 利用 transform 實現動畫變化效果, 去代替 left top 的變換 (輪播圖等) transform變換, 只是視覺效果!
  不會影響到其他盒子, 只觸發了自己的重繪
• 使用文件碎片（DocumentFragment）可以用於批量處理, 建立元素

1.文件碎片
documentFragment是一個儲存多個元素的容器物件（儲存在記憶體）當更新其中的一個或者多個元素時，聊天室原始碼頁面不會更新。
當documentFragment容器中儲存的所有元素操作完畢了, 只有將其插入到頁面中才會更新頁面。
程式碼如下（示例）：

<ul id="box"></ul><script>
  let ul = document.getElementById("box")
  for (let i = 0; i < 20; i++) {
    let li = document.createElement("li")
    li.innerHTML = "index: " + i
    ul.appendChild(li)
  }
  // let ul = document.getElementById("box")
  // let fragment = document.createDocumentFragment()
  // for (let i = 0; i < 20; i++) {
  //     let li = document.createElement("li")
  //     li.innerHTML = "index: " + i
  //     fragment.appendChild(li)
  // }
  // ul.appendChild(fragment)</script>

vue底層渲染更新, 就用了 document.createDocumentFragment

總結

以上便是聊天室原始碼前端渲染迴流與重排問題以及優化方案的全部內容，希望能給大家帶來幫助。
本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：