摘要：瀏覽器創建呈現樹，其中考慮到來自的和樣式其中樣式是避開的。用于顯示由瀏覽器呈現的層的邊框，以便于識別任何轉換或大小更改。用于突出顯示瀏覽器被迫重新繪制的網頁區域。

>>>點擊獲取更多文章<<<

Web瀏覽器將HTML、CSS和JavaScript轉換成已完成的過程視覺化表示是相當復雜的，涉及到很好的"魔術"。下面是一組簡化的瀏覽器步驟：

瀏覽器創建DOM和CSSOM(CSS Object Model)。

瀏覽器創建呈現樹，其中考慮到來自CSSOM的DOM和樣式(其中樣式 display: none 是避開的)。

瀏覽器根據呈現樹計算布局的幾何形狀及其元素。

瀏覽器逐個像素繪制，以創建我們在屏幕上看到的可視化表示。

在這里，我們重點對painting，也就是繪畫，進行討論。

所有這些步驟加在一起，對于瀏覽器來說，在加載時要做的工作很多.實際上，不僅僅是在加載上，而是在DOM(或CSSOM)被更改的任何時候。這就是為什么許多Web開發人員傾向于通過使用某種前端框架來部分解決這個問題，比如React，除了許多其他優點之外，它還可以幫助高度優化DOM中的更改，以避免不必要的重新計算或渲染。

你可能聽說過這樣的術語，狀態（state）, 組件渲染（component rendering），或不可變數據（Immutability）。所有這些都與DOM更改的優化有關，換句話說，只有在必要時才對DOM進行更改。

舉個例子，Web應用程序的狀態可能會發生變化，這將導致UI的更改。但是，某些或更多組件不受此更改的影響。React幫助我們的是，對實際受狀態變化影響的元素進行限制寫入，最終將呈現限制在Web應用程序的最小部分：

DOM/CSSOM → render tree → layout → painting

但是，瀏覽器繪制有其自身的特殊性，因為它甚至可以在不對DOM或CSSOM進行任何更改的情況下進行。

上圖是頁面性能摘要示例，圖表是使用DevTools中的Chrome性能面板生成的(稍后將詳細介紹)，它顯示了瀏覽器中的每個任務在重新加載頁面后在記錄的時間(0-7.12s)中花費了多少時間。正如你所看到的，繪畫起著重要的作用，而這并不是一件壞事。在這個特殊的例子中，增加的繪畫是由頁面上的動畫GIF和canvas drawing(在60 fps)的組合造成的，兩者都不會導致DOM或其樣式的任何更改，同時仍然觸發繪畫。

另一個可以在沒有任何外部干預的情況下導致繪畫的特性的好例子是css的animation屬性，并且與動畫GIF或canvas相比，它在Web上更常見。動畫通常由用戶觸發，如懸停houver，感謝animation和@keyframes，我們甚至可以創建相當復雜的動畫在頁面上不斷運行，無需付出多大的努力。

有些人可能沒有意識到，這些動畫很容易失控，并不斷觸發繪畫，這可能會耗費我們大量的瀏覽器處理能力。當然，有一些規則可以用來避免繪畫。最明顯的就是將元素的操作限制在css的transform和opacity屬性，在默認情況下不會觸發畫圖，除非存在一些特殊情況，例如動畫SVG路徑。

你可能知道Chrome有DevTools。你可能不知道的是一個小小的捷徑(Mac上的Shift+Cmd+P，PC上的Control+Shift+P)。內DevTools打開一個搜索欄命令菜單。

render 面板 估計會引起你的注意，輸入render,找到Show Rendering，回車確認?？梢钥吹揭恍┯腥さ倪x項，當涉及到在web上調試動畫時，這些選項可能非常有用，例如如圖的FPS meter。

Layer borders和paint flashing也是有趣的工具。Layer borders用于顯示由瀏覽器呈現的層的邊框，以便于識別任何轉換或大小更改。paint flashing用于突出顯示瀏覽器被迫重新繪制的網頁區域。大家可以將他們打鉤然后找個網頁重信刷新下看下效果。

當設計提出了要求弄出嘈雜的背景要求，也就是老電視沒信號的那種花屏幕效果（一點一點雪花點）。眾所周知，GIF有許多問題，其中性能當然是其中之一，所以我肯定不能在整個頁面背景中使用GIF。

在這種情況下，使用JavaScript絕對是一種選擇，使用畫布canvas也會有所幫助。然而，所有這一切似乎有點過分，因為只是有一個背景。我決定選擇只使用CSS的方法。

我的解決方案是把一個小的“噪音”png圖像作為一個background-image，啟用background-repeat把它扔到單色背景上。如何達到噪音效果呢？用“無限的CSS動畫”效果呀！通過設置background-position在200毫秒的時間內轉換為不同的值。網頁效果請點擊 http://demo.zhangbing.name/de...

我們通過transform或opacity替換background-position 進行使用，代碼在我的個人demo網頁上http://demo.zhangbing.name/de...， 上面也提到過css的transform和opacity屬性可以避免繪畫，打開剛才說的 render面板，找到 Paint flashing 選項，在兩個不同制作的網頁上，進行點擊切換，會發覺demoa1效果，也就是用了 background-position的那種方案，會進行重新繪畫，而且消耗計算機性能。對比如下圖