瀏覽器渲染機(jī)制與相應(yīng)優(yōu)化策略

sushi 發(fā)布于2019-08-21 15:27 / 1274人閱讀

摘要：瀏覽器渲染樹我們假設(shè)響應(yīng)后和文件已經(jīng)齊備了，此時瀏覽器會怎么做呢當(dāng)前響應(yīng)瀏覽器的普適渲染方式首先，瀏覽器會根據(jù)文件生成樹，載入文件構(gòu)建。

瀏覽器渲染樹

我們假設(shè)HTTP響應(yīng)后HTML和CSS、JavaScript文件已經(jīng)齊備了，此時瀏覽器會怎么做呢？當(dāng)前HTTP響應(yīng)瀏覽器的普適渲染方式：
首先，瀏覽器會根據(jù)HTML文件生成DOM樹，載入CSS文件構(gòu)建CSS Object Model。然后，在DOM樹和CSS Object Model上建立渲染樹（render tree）：渲染樹就是渲染時用到的樹。渲染樹其實就是DOM樹和CSS的組合，和DOM樹相同的是每個HTML標(biāo)簽對應(yīng)一個渲染樹節(jié)點，不同的是，文本節(jié)點比較特殊，每一行文本對應(yīng)一個渲染樹節(jié)點，并且，由于渲染樹識別CSS，標(biāo)簽以及設(shè)置為{display: none}的標(biāo)簽不在DOM樹上。除此之外，渲染樹上的每個節(jié)點該是什么樣式也已經(jīng)計算出來了，此時就涉及CSS選擇器的優(yōu)先級了：瀏覽器默認(rèn)樣式<外部樣式表 .class > tagName > a:hover，important的樣式優(yōu)先級最高。最后，渲染樹建立之后，就可以在屏幕上開始繪制（paint）節(jié)點。

重繪和回流

當(dāng)然這僅僅是第一次繪制，實際中會有交互行為，因此頁面結(jié)構(gòu)以及CSS會隨時變化，這就涉及到重繪（repaint）和回流（reflow）。回流是指渲染文檔的結(jié)構(gòu)被改變了，此時要重新布局了，導(dǎo)致回流的操作包括：DOM元素的刪改、表單或文本內(nèi)容變化、CSS屬性的更改或重新計算、修改class屬性、瀏覽器窗口變化（滾動或縮放）、偽類激活。重繪是指元素的樣式改變不影響文檔流整體結(jié)構(gòu)時，渲染樹結(jié)構(gòu)也就沒有變化，因此僅僅是重新顯示樣式。重繪的代價是比較小的。注意，這并不是說樣式改變不會導(dǎo)致回流，只是特定樣式（background-color, color, visibility）改變才不會導(dǎo)致回流。第二個需要注意的點是，回流一定需要重繪，但是重繪卻不需要回流，我發(fā)現(xiàn)一些文章沒搞清順序。

瀏覽器優(yōu)化策略

回流以及重繪會造成不必要的開銷，這是瀏覽器要優(yōu)化的問題之一，罪魁禍?zhǔn)拙褪荍avaScript代碼執(zhí)行時會改變DOM樹和CSS樣式，因此常見做法是緩存JavaScript操作，然后通過一次回流或重繪解決幾個操作的問題，當(dāng)然也可以人為改變這一瀏覽器自主行為，方法就是通過獲取元素屬性迫使瀏覽器立即重繪和回流，為什么會這樣呢？假設(shè)某一操作要讀取元素的height屬性，此時瀏覽器已經(jīng)緩存了幾個操作，這些操作可能會改變height值，而此時瀏覽器要返回當(dāng)前的精確值，就不得不立即執(zhí)行回流，否則是得不到這個精確值的。

// 最終只有一次重繪和回流被觸發(fā)
var $body = $("body");
$body.css("padding", "1px"); // 觸發(fā)重繪與回流
$body.css("color", "red"); // 觸發(fā)重繪
$body.css("margin", "2px"); // 觸發(fā)重繪與回流

//兩次回流
var $body = $("body");
$body.css("padding", "1px");
$body.css("padding"); // 此處觸發(fā)強制回流
$body.css("color", "red");
$body.css("margin", "2px");

另一優(yōu)化就是瀏覽器認(rèn)為position為absolute或fixed的元素更改只會影響其本身和子元素，而static的元素變化則會影響之后的所有元素，具體請看https://segmentfault.com/a/11...，原因在于absolute和fixed認(rèn)為元素從文檔流中清除了，怎么操作是內(nèi)部的事。

開發(fā)優(yōu)化策略

理解瀏覽器重繪以及回流的主要目的是為了優(yōu)化開發(fā)，或許這些開銷對瀏覽器不重要，但是了解了這些對一些優(yōu)化實踐就會有更深入的了解。
比如：批量的DOM操作可以通過復(fù)制DOM節(jié)點，然后在復(fù)制的節(jié)點上進(jìn)行一系列操作，再替換原節(jié)點即可，因為節(jié)點只要不加到DOM樹上就不影響渲染樹，所以怎么折騰都沒事，最后添加之后只執(zhí)行一次回流。這就是“用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。”的原因。
樣式計算也是同樣的道理。(1)不要逐個修改CSS中的樣式，每次修改可能都是一次重繪或回流，所以最好是在原始CSS里定義不同的class，通過改變class實現(xiàn)樣式轉(zhuǎn)換。(2)只對position為absolue/fixed的元素設(shè)置動畫，因為這些元素不在文檔流中，怎么動都不會導(dǎo)致回流，只會重繪。(3)當(dāng)需要設(shè)置的樣式很多時設(shè)置className而不是直接操作style。(4)避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動態(tài)屬性)。

http://www.phpied.com/renderi...
http://taligarsiel.com/Projec...