如何避免無用的渲染繪製

本文翻譯自html5rock上的文章，文章英文原版地址在最後給出。

文中的Paints我翻譯成渲染繪製，我自己是這麼理解。

開始

繪製(渲染)一個網站或者一個應用的元素對瀏覽器來說開銷是很大的，它會對運行時的效率產生負面影響，在這篇文章中我們將快速的過一遍，哪些情況會導致導致繪製事件在瀏覽器中產生，以及如何在你今後的工作中盡量避免沒必要的繪製。

繪製(渲染)：一場超快的旅行

瀏覽器的主要任務之一就是將DOM和CSS轉換成像素並繪製到屏目上，這是一系列複雜的處理過程。瀏覽器先讀取HTML標籤並由此建立DOM樹，它對CSS也是進行了類似的工作，讀取CSS並建立CSSOM樹，然後將兩者合并，最終我們就可以根據合并後的結構渲染成像素到屏目了

繪製過程本身就挺有趣。在Chrome瀏覽器中，合并後的DOM樹與CSS樹被一款名叫Skia的軟體進行柵格化。如果你曾使用過CANVAS的API，那麼你會覺得它們的API非常相似。

不光是moveTo, lineTo等這些API，另外的一些進階API也一樣非常相似。本質上來講，所有需要被繪製的元素都將被提取到能被Skia執行的集合中，執行後輸出的是一堆位元影像。這些位元影像將被上傳到GPU中，GPU將幫他們組合在一起並最終輸出到屏目上。

Skia的工作量是直接受你在元素上所應用的樣式引響的。如果你在元素應用的樣式演算法很複雜那麼，會大大加重Skia的工作。你可以參考這篇文章article on how CSS affects page render weight，以更深的理解CSS如何影響頁面渲染。

總而言之，繪製工作費時間，如果我們不減少繪製，那麼可能會掉偵。使用者可能會注意到掉幀，看起來會閃一下。這對於我們的APP上來說是從根本上傷害了使用者體驗。我們不希望看到這樣的結果吧，so讓我們來看看哪些東西會產生必要的繪製(渲染)工作，以及我們能對這些做些啥最佳化。

Scrolling(滾動)

無論你是往上還是往下滾動，內容在顯示到屏目上之前瀏覽器都需要進行重繪。如果一切順利的話，可能產生重繪的地區會是很小一塊，但是即使是很小一塊，那一小塊元素可能就是應用了複雜的CSS樣式。所以不會因為繪製的地區小而繪製的速度會快。

為了看清哪些地區被重繪了，你可以使用Chrome中內建的調試工具，點擊右上方的設定按鈕，選中 “Show Paint Rectangles”後，在你的頁面中做一些簡單的互動，你便會看到一些會閃動的矩形框，那就是重繪的地區了。

滾動的效能表現，是你網站成功的關鍵。使用者真的會關心你的網站或應用滾動的是不是順暢，他們可不會喜歡滾動的不流暢的網站。我們在滾動時保證輕量的繪製工作，因此而得到的一個好處就是使用者看不到閃動或掉幀這類事情了。

我之前已經寫過一篇文章是關於滾動效能的，如果你想瞭解更我，可以參考這篇文章 article on scrolling performance