webkit瀏覽器渲染影響因素分析

標籤：orm   script   rom   使用動畫   ima   操作   http   osi   陰影   

Chrome上各個渲染部分的實際含義：

Parse Html:

發送一個http請求，擷取請求的內容，然後解析html的過程。

Recalculate Style:

重新計算樣式，它計算的是Style，和Layout做的事情完全不同。Layout計算的一個元素絕對的位置和尺寸，或者說是“Compute Layout”。

Recalculate被觸發的時候做的事情就是處理JavaScript給元素設定的樣式而已。Recalculate Style會計算出Render 樹（渲染樹），然後從根節點開始進行頁面渲染，將CSS附加到DOM上的過程。

任何企圖改變元素樣式的操作都會觸發Recalculate。同Layout一樣，它也是在JavaScript執行完成後才觸發的。

Layout：

計算頁面上的布局，即元素在文檔中的位置及大小。如上面所說，Layout計算的是布局位置資訊。任何有可能改變元素位置或大小的樣式都會觸發這個Layout事件，如width、height

Rasterizer：

光柵化，一般的安卓手機都會進行光柵化，光柵主要是針對圖形的一個柵格化過程。低端手機在這部分耗時還蠻多的。

Paint：

頁面上顯示東西有任何變動都會觸發Paint?0?2。包括拖動捲軸、滑鼠選中文字，等這些完全不改變樣式，只改變顯示結果的動作都會觸發Paint。

Paint的工作就是把文檔中使用者可見的那一部分展現給使用者。Paint是把Layout和Recalculate的計算的結果直接在瀏覽器表單上繪製出來，它並不實現具體的元素計算。

Image Decode：

圖片解碼，將圖片解析到瀏覽器上顯示的過程。

Image Resize：

圖片的大小設定，圖片載入解析後，若發現圖片大小並不是實際的大小（CSS改變了寬高），則需要Resize。Resize越大，耗時越久，所以盡量以圖片的原始大小輸出。

Composite Layers：

最後合并圖層，輸出頁面到螢幕。瀏覽器在渲染過程中會將一些含義特殊樣式的DOM結構繪製於其他圖層，有點類似於Photoshop的圖層概念。一張圖片在Photoshop是由多個圖層組合而成，而瀏覽器最終顯示的頁面實際也是有多個圖層構成的。

有哪些因素會導致建立圖層：

1、進行3D或者透視變換的CSS屬性

2、使用硬體加速視頻解碼的<video>元素

3、具有3D（WebGL）上下文或者硬體加速的2D內容相關的<canvas>元素

4、組合型外掛程式（即Flash）

5、具有有CSS透明度動畫或者使用動畫式Webkit變換的元素

6、具有硬體加速的CSS濾鏡的元素

在CSS裡面，不同的屬性會觸發不同的layout或者paint，所以通過JS改變css的屬性時，應該考慮到這些方面。如：

css:

如何最佳化渲染時間

1、為了確保頁面的流程，必須保證60fps內不發生2次渲染樹更新。?0?2如，16ms內只發生如下幾個操作則是正常及正確的?0?2：

2、頁面滾動時，需要避免不必要的渲染及長時間渲染。

1）position:fixed

fixed定位在滾動時會不停的進行渲染，特別是如果是頁面頂部有個fiexd，頁面底部有個類似返回頂部的fixed，則在滾動時會整個頁面進行渲染，效率非常低。可以加transform: translateZ(0);解決。

2) overflow:scroll

3) hover effects

有些：hover偽類在頁面滾動時會不小心就觸發到，如hover效果有陰影、圓角等比較耗時的屬性時，建議頁面滾動時，先取消hover效果，滾動停止後再加上hover效果。這個可以通過在外層加類名進行控制。

長時間渲染包括：

1）複雜的CSS

2）Image Decodes

這裡特別是圖片的Image Decodes及 Images Resize 這2個過程在移動端是非常耗時的，如：

webkit瀏覽器渲染影響因素分析