構建css樹
dom樹 和css樹 合併為render樹
布局 繪製paint
重排reflow
* width
* height
* padding
* margin
* display
* border-width
* border
* min-height
* top
* bottom
* left
* right
* position
* float
* clear
* text-align
* overflow-y
* font-weight
* overflow
* font-family
* line-height
* vertival-align
* white-space
* font-size
display: none; 會引起一次重排和重繪, visibility: hidden; 只會引起一次重繪(因為他只是把那個層隱藏了，但是還佔據空間存在著)
重繪repaint
* color
* border-style
* border-radius
* visibility
* text-decoration
* background
* background-image
* background-position
* background-repeat
* background-size
* outline-color
* outline
* outline-style
* outline-width
* box-shadow
這樣可以看到，這些屬性都不會修改節點的大小和位置，自然不會觸發重布局，但是節點內部的渲染效果進行了改變，所以只需要重繪就可以了手機重繪也很慢
在重繪時，這些節點會被載入到gpu中進行重繪，這對移動裝置如手機的影響還是很大的。因為cpu不如台式電腦或膝上型電腦，所以繪畫的時間更長。而且cpu與gpu之間的有較大的頻寬限制，所以紋理的上傳需要一定時間
透明度(opacity)不會觸發重繪？
強迫瀏覽器建立圖層(blink & webkit)
優點: 這種方式可以消除在動畫開始之前的圖層建立時間(提前啟動gpu)，使得動畫儘管開始(建立圖層和繪製圖層還是比較慢的)
缺點:
最佳選擇---transform
瀏覽器在渲染乙個頁面時，會將頁面分為很多個圖層，圖層有大有小，每個圖層上有乙個或多個節點。在渲染dom的時候，瀏覽器所做的工作實際上是：
獲取dom後分割為多個圖層
對每個圖層的節點計算樣式結果（recalculate style–樣式重計算）
為每個節點生成圖形和位置（layout–回流和重布局）
將每個節點繪製填充到圖層點陣圖中（paint setup和paint–重繪）
圖層作為紋理上傳至gpu
符合多個圖層到頁面上生成最終螢幕影象（composite layers–圖層重組）
chrome中滿足以下任意情況就會建立圖層：
需要注意的是，如果圖層中某個元素需要重繪，那麼整個圖層都需要重繪。比如乙個圖層包含很多節點，其中有個gif圖，gif圖的每一幀，都會重回整個圖層的其他節點，然後生成最終的圖層位圖。所以這需要通過特殊的方式來強制gif圖屬於自己乙個圖層（translatez(0)或者translate3d(0,0,0)），css3的動畫也是一樣（好在絕大部分情況瀏覽器自己會為css3動畫的節點建立圖層)圖層和css動畫
gif或者動畫運動過程，每一幀可能需要做如下工作:
計算需要被載入到節點上的樣式結果（recalculate style–樣式重計算）
為每個節點生成圖形和位置（layout–回流和重布局）
將每個節點填充到圖層中（paint setup和paint–重繪）
組合圖層到頁面上（composite layers–圖層重組）
所以提高動畫的效能，就是減少它做的工作。最好的情況是，將它所有的變化對映到屬於動畫或gif的圖層，變化(transform) & 透明度 (opacity)就屬於這種情況。
現代瀏覽器如chrome，firefox，safari和opera都對變換和透明度採用硬體加速，但ie10+不是很確定是否硬體加速
google目前正在**通過js的多執行緒（web workers）來提供更好的動畫效果，而不會觸發重布局及樣式重計算
動畫給予了頁面豐富的視覺體驗。我們應該盡力避免使用會觸發重布局和重繪的屬性，以免失幀。最好提前申明動畫，這樣能讓瀏覽器提前對動畫進行優化。由於gpu的參與，現在用來做動畫的最好屬性是如下幾個：
頁面渲染的原理及流程
根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。構建渲染樹。頁面的重繪與重排 也有稱回流 頁面渲染完成後，若js操作了dom節點，根據js對dom操作動作的大小，瀏覽器對頁面進...
效能優化 頁面渲染 重繪 回流
參考 高效能web開發 深入理解頁面呈現 重繪 回流 因為一些原因要重新構建渲染數的時候，就叫做回流,第一次構建的時候也叫做回流。引起回流的操作 回流一定會導致重繪 影響元素幾何屬性發生變化 重繪 瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分...
html頁面渲染的原理和優化
乙個html網頁載入的大概過程 1.使用者輸入 假定是第一次訪問 瀏覽器向伺服器發出請求，伺服器返回html檔案 2.瀏覽器開始載入html 發現head標籤內有乙個link標籤引用外部css檔案，那麼瀏覽器發出css檔案的請求，等待伺服器返回css檔案 3.瀏覽器繼續載入裡面的 並且css 已經拿...