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

spacewander 發(fā)布于2019-08-01 16:32 / 1068人閱讀

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

瀏覽器渲染樹

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

重繪和回流

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

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

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

// 最終只有一次重繪和回流被觸發(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ā)強(qiáng)制回流
$body.css("color", "red");
$body.css("margin", "2px");

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

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

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

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