web頁面瀏覽器渲染過程
1.解析html檔案，並構建dom樹：
更深入的了解：參考
2.解析css**，計算出各層的最終樣式資料：
3.根據dom樹以及計算出的各層最終樣式構建渲染樹：
4.圖層作為紋理上傳至gpu，復合多個圖層到頁面上生成最終影象(composite layers—圖層重組)
，此文中有一些引子可供理解。
觸發重布局的屬性：
1.改變盒模型相關的屬性：width, height, margin, padding, display, border-width,border,min-height。
2.改變定位屬性及浮動：top,bottom,left,right,position,float,clear。
3.改變節點內部文字的結構：text-align, overflow, font-weight,font-family,font-size,line-height, vertical-align, white-space。
總結：其實看了這些屬性，也許聰明的你已經猜到，觸發重布局的主要原因就是 節點的大小尺寸或位置被改變了。
觸發重繪的屬性：color,background,border-radius,border-style,visibility,outline,box-shadow……（background: gradient漸變 gpu殺手啊啊啊！）
總結：這些屬性沒有改變節點的大小和位置，只是改變了節點內部的渲染效果，所以只重繪，不重布局。
針對瀏覽器的css效能優化
減少重繪和重排：
css選擇器的使用：
高效能css3動畫注意事項
1.opacity是不會觸發重繪的，當opacity值發生改變時，gpu只是通過改變圖層的alpha值來達到效果，但前提是被改變opacity值的元素必須是乙個圖層。在動畫製作中，opacity是個很好的選擇。
2.在相容性允許的情況下，transform變形絕對是開發頁面動畫的最佳選擇，目前在很多css框架元件中使用的動畫，都優選transform來實現。transform:translate3d(0, 0, 0)和transform: translatez(0)可以強迫瀏覽器為其建立圖層，這樣就消除了在動畫開始前圖層的建立時間，使動畫盡快開始。變形的還有乙個重要優點是，transform平移、旋轉、縮放都不會觸發重布局，而以前使用的left、top均會觸發重布局。
參考內容：
CSS之相容瀏覽器篇
2006 01 16 04 44 12 author greengnn font size large medium all quote 先溫習一下對於ie的box model的破解 ie box model這個臭名昭著的bug存在於ie6 win以前的每乙隻版本，這個蟲子直到tantak發布了流傳...
瀏覽器css差異
一 css選擇器差異 乙個css的ie和ff差異，popup container alert 在ie6下alert類只能作用於 popup container的子元素。ff下alert類可以作用於 popup container和其子元素。二 z index在ie中的迷惑 z index屬性適用於定...
CSS 瀏覽器核心
所謂核心，就是常駐記憶體 能夠快速響應的那一部分核心 非核心 都是要用到時再調入記憶體並執行的。常見瀏覽器的核心，一般不外乎微軟的ie 核心和webkit核心。二 gecko核心代表作品mozilla firefoxgecko是一套開放源 的 以c 編寫的網頁排版引擎。gecko是最流行的排版引擎之...