關於css重排和重繪的概念，最近看到不少這方面的文章，覺得挺有用，在製作中考慮瀏覽器的效能，減少重排能夠節省瀏覽器對其子元素及父類元素的重新渲染；避免過分的重繪也能節省瀏覽器效能；優化動畫，使用3d啟用gpu硬體加速；慎重選擇高消耗的樣式，如box-shadow、border-radius、transform、css filters等。
瀏覽器渲染展示網頁的過程，大致分為以下幾個步驟：
解析html(html parser)
構建dom樹(dom tree)
渲染樹構建(render tree)
繪製渲染樹(painting)
什麼 css 屬性是高消耗的？就是那些繪製前需要瀏覽器進行大量計算的屬性。
瀏覽器為了重新渲染部分或整個頁面，重新計算頁面元素位置和幾何結構的程序叫做reflow.
通俗點說就是當開發人員定義好了樣式後(也包括瀏覽器的預設樣式),瀏覽器根據這些來計算並根據結果將元素放到它應該出現的位置上，這個過程叫做reflow.
由於reflow是一種瀏覽器中的使用者攔截操作，所以我們了解如何減少reflow次數，及dom的層級，css效率對refolw次數的影響是十分有必要的。
reflow(回流)是導致dom指令碼執行效率低的關鍵因素之一，頁面上任何乙個節點觸發了reflow，會導致它的子節點及祖先節點重新渲染。
簡單解釋一下 reflow：當元素改變的時候，將會影響文件內容或結構，或元素位置，此過程稱為 reflow。
hello
name:bding
male
coding
loving
常見的重排元素
width
height
padding
margin
display
border-width
border
topposition
font-size
float
text-align
overflow-y
font-weight
overflow
left
font-family
line-height
vertical-align
right
clear
white-space
bottom
min-height
不要一條一條地修改 dom 的樣式，預先定義好 class，然後修改 dom 的classname
把 dom 離線後修改，比如：先把 dom 給display:none(有一次 reflow)，然後你修改100次，然後再把它顯示出來
不要把 dom 結點的屬性值放在乙個迴圈裡當成迴圈裡的變數
盡可能不要修改影響範圍比較大的 dom
為動畫的元素使用絕對定位absolute / fixed
不要使用table布局，可能很小的乙個小改動會造成整個 table 的重新布局
盡可能限制reflow的影響範圍，盡可能在低層級的dom節點上，上述例子中，如果你要改變p的樣式，class就不要加在div上，通過父元素去影響子元素不好。
避免設定大量的style屬性，因為通過設定style屬性改變結點樣式的話，每一次設定都會觸發一次reflow，所以最好是使用class屬性
實現元素的動畫，它的position屬性，最好是設為absoulte或fixed，這樣不會影響其他元素的布局
動畫實現的速度的選擇。比如實現乙個動畫，以1個畫素為單位移動這樣最平滑，但是reflow就會過於頻繁，大量消耗cpu資源，如果以3個畫素為單位移動則會好很多。
不要使用table布局，因為table中某個元素旦觸發了reflow，那麼整個table的元素都會觸發reflow。那麼在不得已使用table的場合，可以設定table-layout:auto;或者是table-layout:fixed這樣可以讓table一行一行的渲染，這種做法也是為了限制reflow的影響範圍
如果css裡面有計算表示式，每次都會重新計算一遍，出發一次reflow
repaint是在乙個元素的外觀被改變，但沒有改變布局的情況下發生的，如改變了visibility、outline、background等。當repaint發生時，瀏覽器會驗證dom樹上所有其他節點的visibility屬性。
通俗來說，就是當各種盒子的位置、大小以及其他屬性，例如顏色、字型都確定下來後，瀏覽器便把這些元素都按照各自的特性繪製一遍，於是頁面的內容出現了，這個過程叫做repaint
當元素改變的時候，將不會影響元素在頁面當中的位置（比如background-color,border-color,visibility），瀏覽器僅僅會應用新的樣式重繪此元素，此過程稱為repaint。
常見的重繪元素
color
border-style
visibility
background
text-decoration
background-image
background-position
background-repeat
outline-color
outline
outline-style
border-radius
outline-width
box-shadow
background-size
css3 動畫是優化的重中之重。除了做到上面兩點，減少 reflow 和 repaints之外，還需要注意以下方面。
啟用 gpu 硬體加速
/*
* 根據上面的結論
* 將 2d transform 換成 3d
* 就可以強制開啟 gpu 加速
* 提高動畫效能
*/div
div
優化CSS重排重繪與瀏覽器效能
瀏覽器渲染展示網頁的過程，大致分為以下幾個步驟 解析html html parser 構建dom樹 dom tree 渲染樹構建 render tree 繪製渲染樹 painting 什麼 css 屬性是高消耗的？就是那些繪製前需要瀏覽器進行大量計算的屬性。瀏覽器為了重新渲染部分或整個頁面，重新計算...
優化CSS重排重繪與瀏覽器效能
解析html html parser 構建dom樹 dom tree 渲染樹構建 render tree 繪製渲染樹 painting 什麼 css 屬性是高消耗的？就是那些繪製前需要瀏覽器進行大量計算的屬性。瀏覽器為了重新渲染部分或整個頁面，重新計算頁面元素位置和幾何結構的程序叫做reflow.通...
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的效能問...