資訊專欄INFORMATION COLUMN
摘要：原文鏈接瀏覽器渲染那些事之瀏覽器內核渲染引擎在各個瀏覽器廠商你追我趕的形勢下，截止今日，產生了很多不同的瀏覽器，各個瀏覽器本質大同小異，核心部分基本相似，由渲染引擎和引擎組成。
原文鏈接
瀏覽器渲染那些事之 Reflow、Repaint 瀏覽器內核（渲染引擎）在各個瀏覽器廠商你追我趕的形勢下，截止今日，產生了很多不同的瀏覽器，各個瀏覽器本質大同小異，核心部分基本相似，由渲染引擎和 JS 引擎組成。當你在訪問網站頁面的時候，瀏覽器做了很多事情，從發送請求，到解析 HTML 源碼，構建渲染樹，最后將內容像素繪制到設備屏幕上，一步步完成用戶最終需要的場景。然而，在瀏覽器完成整個渲染的過程中，最為核心的就是“渲染引擎”。以下分別列出一些主流瀏覽器的渲染引擎：
chrome - webkit
safari - webkit
opera - webkit（早期是 presto）
firefox - gecko
ie - trident
渲染流程結合瀏覽器渲染原理，來剖析以下代碼渲染構建過程：
1.HTML 源碼：
browser rendering
Hello web performance students!
2.CSS 源碼：
body { font-size: 16px }
p { font-weight: bold }
span { color: red }
p span { display: none }
img { float: right }
3.該圖為以上源代碼構建樹：
瀏覽器渲染頁面整個過程描述：
首先，解析 HTML Source，構建 DOM Tree；
同時，解析 CSS Style，構建 CSSOM Tree；
然后，組合 DOM Tree 與 CSSOM Tree，去除不可見元素，構建 Render Tree；
再執行 Reflow，根據 Render Tree 計算每個可見元素的布局（幾何屬性）；
最后，執行 Repaint，通過繪制流程，將每個像素渲染到屏幕上。
注意：
Render Tree 只包含渲染網頁所需要的節點；
Reflow 過程是布局計算每個對象的精確位置和大??；
Repaint 過程則是將 Render Tree 的每個像素渲染到屏幕上。
哪些階段影響渲染效率我們都知道，網頁是需要掛載在客戶端的瀏覽器上運行，但是隨著互聯網的快速發展，為保證用戶訪問應用的流暢性，往往對客戶端的設備配置要求較高。然而，對于用戶的設備，我們是無法控制；因此，作為一名開發者，就需要找到除了用戶設備配置之外導致訪問不流暢的問題，下面就從渲染流程中找到影響性能的問題。
瀏覽器初始化渲染時會執行一次 Reflow 過程，這個過程主要是用來確定頁面上每個元素在屏幕上的幾何位置屬性。但是，每執行一次 Reflow 會需要花費大量的時間，耗費大量的設備資源，所以盡量避免執行 Reflow 過程。同時，執行完 Reflow 都會伴隨著一次 Repaint 過程，這個過程也會耗費大量的計算機資源，嚴重影響頁面的渲染性能。所以，在瀏覽器渲染階段，主要影響頁面渲染的階段是 Reflow 和 Repaint 過程，因此在編寫代碼時應該盡量避免 Reflow 和 Repaint 過程的執行，如：避免在 JS 代碼里直接改變元素的幾何屬性。
reflow & repaint 簡介reflow 在渲染過程中稱為回流，發生在 Render Tree 階段，它主要是用來確定每個元素在屏幕上的幾何屬性，需要大量計算每個元素的位置。在代碼里每改變一個元素的幾何屬性，均會發生一次回流過程。
repaint 在渲染過程中稱為重繪，發生在 reflow 過程之后，當元素的幾何屬性確定之后便要開始將元素繪制在屏幕上展示。repaint 執行過程就是將元素的顏色、背景等屬性繪制出來。在代碼里沒改變一次元素的顏色等屬性時均會對相關元素執行一次重繪。
如何觸發 reflow 和 repaint 過程1.改變元素 font-size：
document.getElementsByTagName("body")[0].style.fontSize = "20px"; // reflow,repaint
2.改變元素盒模型margin、border、padding、width：
let styles = document.getElementsByTagName("body")[0].style;
styles.margin = "40px"; // reflow,repaint
styles.border = "40px solid #f00"; // reflow,repaint
styles.padding = "40px"; // reflow,repaint
styles.width = "300px"; // reflow,repaint
3.改變元素顏色、背景色屬性：
let styles = document.getElementsByTagName("body")[0].style;
styles.color = "#fff"; // repaint
styles.backgroundColor = "#f00"; // repaint
4.特殊：offset、scroll、client*、getComputedStyle、currentStyle：
由于瀏覽器在處理批量修改頁面元素樣式時，會將批量操作緩存起來，然后再做一次 reflow 過程（異步 reflow），避免每次操作都執行 reflow 消耗資源。但是如果在某個操作之后立馬調用了以上執行屬性，為了等夠得到最新的樣式，會檢查緩存的操作，是否需要 reflow，這樣就 flush 出最新的樣式。
如何減少 reflow 和 repaint 過程1.減少 JS 逐行修改元素樣式：
let body = document.getElementsByTagName("body")[0];
body.className += " class-name";
2.離線處理 DOM 操作：
通過 documentFragment 集中處理臨時操作；
克隆節點進行操作，然后進行原節點替換；
使用 display:none; 進行批量操作。
3.減少樣式的重新計算，即減少 offset、scroll、client*、getComputedStyle、currentStyle 的使用，因為每次調用都會刷新操作緩沖區，執行 reflow & repaint。
參考資料渲染性能；
Rendering: repaint, reflow/relayout, restyle - 譯文；
瀏覽器的渲染原理簡介；
分析運行時性能；
如何使用 Timeline 工具。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111809.html
摘要：瀏覽器會對發生變化的呈現器以及其子代標注為，表示需要進行標記分為兩種和。異步和同步異步，簡單來說，就是指瀏覽器為了盡可能減少和的操作，而將這些操作積攢起來，再統一做一次。 終于到了布局的部分了！ 布局 當渲染對象被創建并添加到樹中，是沒有位置和大小的，計算這些值的過程稱為layout或reflow。布局是一個遞歸過程，由根渲染對象開始，對應html文檔元素，布局繼續遞歸的通過一些或所有...
摘要：瀏覽器會對發生變化的呈現器以及其子代標注為，表示需要進行標記分為兩種和。異步和同步異步，簡單來說，就是指瀏覽器為了盡可能減少和的操作，而將這些操作積攢起來，再統一做一次。 終于到了布局的部分了！ 布局 當渲染對象被創建并添加到樹中，是沒有位置和大小的，計算這些值的過程稱為layout或reflow。布局是一個遞歸過程，由根渲染對象開始，對應html文檔元素，布局繼續遞歸的通過一些或所有...
摘要：瀏覽器會對發生變化的呈現器以及其子代標注為，表示需要進行標記分為兩種和。異步和同步異步，簡單來說，就是指瀏覽器為了盡可能減少和的操作，而將這些操作積攢起來，再統一做一次。 終于到了布局的部分了！ 布局 當渲染對象被創建并添加到樹中，是沒有位置和大小的，計算這些值的過程稱為layout或reflow。布局是一個遞歸過程，由根渲染對象開始，對應html文檔元素，布局繼續遞歸的通過一些或所有...
摘要：屏幕的變化就被稱為或者是。而瀏覽器的目標之一就是減少以及的負面影響，其中的一個策略就是干脆不做，又或者說至少不是現在做。但有時腳本語句會破化瀏覽器優化，并使其刷新隊列以及執行所有批處理的改變。 **首先說翻譯這篇文章的目的其實是，之前回答的關于瀏覽器js渲染的問題被打臉了 ?_? ，不得不正視自己半路出家學前端的事實，所以這篇文章就算是自己的一個筆記吧，學而時習之，不亦樂乎，翻譯錯了，...
閱讀 2591·2021-11-18 10:02
閱讀 2627·2021-11-15 11:38
閱讀 3697·2021-11-12 10:36
閱讀 695·2021-11-12 10:34
閱讀 2888·2021-10-21 09:38
閱讀 1478·2021-09-29 09:48
閱讀 1492·2021-09-29 09:34
閱讀 1088·2021-09-22 10:02
