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