研討瀏覽器繪製和Web性能的注意事項

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

瀏覽器繪製

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

1. 瀏覽器建立DOM和CSSOM(CSS Object Model)。
2. 瀏覽器建立呈現樹，其中考慮到來自CSSOM的DOM和樣式(其中樣式 display: none 是避開的)。
3. 瀏覽器根據呈現樹計算佈局的幾何形狀及其元素。
4. 瀏覽器逐個像素繪製，以建立咱們在屏幕上看到的可視化表示。

在這裏，咱們重點對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路徑。

Paint flashing

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

render 面板 估計會引發你的注意，輸入render,找到Show Rendering，回車確認。能夠看到一些有趣的選項，當涉及到在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的那種方案，會進行從新繪畫，並且消耗計算機性能。對好比下圖