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

>>>點(diǎn)擊獲取更多文章<<<

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

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

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

瀏覽器根據(jù)呈現(xiàn)樹計算布局的幾何形狀及其元素。

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

在這里，我們重點(diǎn)對painting，也就是繪畫，進(jìn)行討論。

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

你可能聽說過這樣的術(shù)語，狀態(tài)（state）, 組件渲染（component rendering），或不可變數(shù)據(jù)（Immutability）。所有這些都與DOM更改的優(yōu)化有關(guān)，換句話說，只有在必要時才對DOM進(jìn)行更改。

舉個例子，Web應(yīng)用程序的狀態(tài)可能會發(fā)生變化，這將導(dǎo)致UI的更改。但是，某些或更多組件不受此更改的影響。React幫助我們的是，對實際受狀態(tài)變化影響的元素進(jìn)行限制寫入，最終將呈現(xiàn)限制在Web應(yīng)用程序的最小部分：

DOM/CSSOM → render tree → layout → painting

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

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

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

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

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

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

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

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

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

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

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