頁面渲染簡化paint複雜程度和區域

paint是填充畫素並且最後合成在使用者的螢幕上的過程。

通常是在管道中耗費最大的，你要盡可能的避免使用paint。

如果你觸發了layout你就一定觸發了paint，因為改變元素的幾何形狀意味著元素的畫素需要修改。

你可以觸發paint如果你改變了不是幾何性質的屬性，例如background,text color,亦或shadow。

在這些情況下layout將不會被觸發，管道看上去像下面這樣：

在chrome devtools中的console欄目選中rendering，勾選show paint rectangels

注意上面的鉤鉤選擇之後將會導致chrome將會捕捉paint發生的地方，並用綠色表示。

如果有些地方你認為不應該發生paint，那麼你可以深入優化。

現在，你需要做recording。recording結束之後選擇一幀，在下面的summary中點選paint profiler，如下圖：

點選之後你可以看見**被paint了，這個paint花費了多長時間和這個paint呼叫的individual paint 。

上面檢測方法讓你同時檢測了paint的複雜度和paint的區域。

你可以根據結果來優化。

paint不總是在在記憶體中paint成一張image。事實上，瀏覽器paint成多張image，亦或多張合成器層(compositor layers)，如果有必要的話。

好處是元素被再次paint亦或在螢幕上使用transform屬性進行移動時，可以不影響其他元素。

這就像繪畫軟體sketch，gimp亦或photoshop，乙個層中進行的操作不會影響另乙個層，所有的層乙個接著乙個相互結合並建立除了最後的。

建立新的層的最好方式是使用css屬性will-change。在chrome和opera和firefox瀏覽器中起作用，並且因為will-change屬性值transform，將會建立乙個新的構造器層。

.moving-element

對於不支援will-change屬性的瀏覽器，但是為了建立layer，所以你必須（誤）用3d transform來強迫建立乙個新的layer，適用於safari和mobile safari等。

.moving-element

注意不要建立太多的layer，因為乙個layer既佔記憶體也需要管理。如果你提公升了元素（promote a element）來建立新的層，使用devtools來確定這樣做將會給你乙個效能上的提公升。

不要不進行檢測就直接提公升元素。

對paint而言巨大的挑戰就是瀏覽器將兩個需要paint的元素結合在一起，而且這將會導致整個螢幕被重新paint。

所以，盡可能減少paint區域。

當談到paint的時候，有些行為消耗很大。

比如，任何包含模糊效果(例如乙個陰影)**將會比畫乙個紅色的box花費更長時間。

css中的background:red和box-shadow:0,4px,4px,rgba(0,0,0,0.5)在執行上對效能有很大不同的影響。

上面paint profiler允許你決定你為了達到最終相同的結果，你是否需要替換已有方案來達到最優性能：你要在動畫中盡量變paint操作，且每一幀的paint都會大於10ms，特別是在移動手機上將會耗時更多。

頁面渲染 簡化paint複雜程度和區域