瀏覽器渲染機制與相應優化策略

spacewander 發布于2019-08-01 16:32 / 1063人閱讀

摘要：瀏覽器渲染樹我們假設響應后和文件已經齊備了，此時瀏覽器會怎么做呢當前響應瀏覽器的普適渲染方式首先，瀏覽器會根據文件生成樹，載入文件構建。

瀏覽器渲染樹

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

重繪和回流

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

瀏覽器優化策略

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

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

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

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

開發優化策略

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

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

GPU云服務器云服務器阿里云的備份策略機制 jsp 瀏覽器渲染 linux安全策略與實例 linux安全策略與實例下載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50588.html

瀏覽器渲染機制與相應優化策略

摘要：瀏覽器渲染樹我們假設響應后和文件已經齊備了，此時瀏覽器會怎么做呢當前響應瀏覽器的普適渲染方式首先，瀏覽器會根據文件生成樹，載入文件構建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 瀏覽器渲染樹我們假設HTTP響應后HTML和CSS、JavaScript文件已經齊備了，此時瀏覽器會怎么做呢？當前HTTP響應瀏覽器...

suxier 2019-08-29 12:15 評論0 收藏0
瀏覽器渲染機制與相應優化策略

摘要：瀏覽器渲染樹我們假設響應后和文件已經齊備了，此時瀏覽器會怎么做呢當前響應瀏覽器的普適渲染方式首先，瀏覽器會根據文件生成樹，載入文件構建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 瀏覽器渲染樹我們假設HTTP響應后HTML和CSS、JavaScript文件已經齊備了，此時瀏覽器會怎么做呢？當前HTTP響應瀏覽器...

sushi 2019-08-21 15:27 評論0 收藏0
WEB/H5性能優化總結

摘要：如下圖所示一重繪與回流前端性能優化最關鍵的就是減少頁面的重繪與回流。很明顯就是少了一步，這是因為把會觸發回流的屬性用替代，這樣就使渲染的過程減少了這一步，使渲染的時間減少從而提高性能。我們今天來說說前端圖形渲染優化，因為我接下來的時間可能要開始研究webgl方面的東西，所以就在這里把之前做過的H5做一個總結，現同步發布于GERRY_BLOG，TiMiGerry-知乎，轉載請保留鏈接。...

stdying 2019-08-06 13:36 評論0 收藏0
WEB/H5性能優化總結

摘要：如下圖所示一重繪與回流前端性能優化最關鍵的就是減少頁面的重繪與回流。很明顯就是少了一步，這是因為把會觸發回流的屬性用替代，這樣就使渲染的過程減少了這一步，使渲染的時間減少從而提高性能。我們今天來說說前端圖形渲染優化，因為我接下來的時間可能要開始研究webgl方面的東西，所以就在這里把之前做過的H5做一個總結，現同步發布于GERRY_BLOG，TiMiGerry-知乎，轉載請保留鏈接。...

mingde 2019-08-23 12:13 評論0 收藏0