前端性能優化-（一）重繪與迴流

重繪是一個元素外觀的改變所觸發的瀏覽器行爲。

渲染對象在建立完成並添加到渲染樹時，並不包含位置和大小信息。計算這些值的過程稱爲佈局或重排

優化方案：

1.元素位置移動變換時儘可能使用CSS3的transform來代替對top left等的操做
變換（transform）和透明度（opacity）的改變僅僅影響圖層的組合
2.使用opacity來代替visibility
(1).使用visibility不觸發重排，可是依然重繪。
(2).直接使用opacity即觸發重繪，又觸發重排（GPU底層設計如此！）。
(3).opacity配合圖層使用，即不觸發重繪也不觸發重排。
緣由：
透明度的改變時，GPU在繪畫時只是簡單的下降以前已經畫好的紋理的alpha值來達到效果，並不須要總體的重繪。
不過這個前提是這個被修改opacity自己必須是一個圖層。
3.不要使用table佈局
table-cell
4.將屢次改變樣式屬性的操做合併成一次操做
不要一條一條地修改DOM的樣式，預先定義好class，而後修改DOM的className
5.將DOM離線後再修改
因爲display屬性爲none的元素不在渲染樹中，對隱藏的元素操做不會引起其餘元素的重排。
若是要對一個元素進行復雜的操做時，能夠先隱藏它，操做完成後再顯示。這樣只在隱藏和顯示時觸發2次重排。
6.利用文檔碎片(documentFragment)------vue使用了該種方式提高性能。
7.不要把獲取某些DOM節點的屬性值放在一個循環裏當成循環的變量
當你請求向瀏覽器請求一些 style信息的時候，就會讓瀏覽器flush隊列，好比：
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
當你請求上面的一些屬性的時候，瀏覽器爲了給你最精確的值，須要刷新內部隊列，
由於隊列中可能會有影響到這些值的操做。即便你獲取元素的佈局和樣式信息跟最近發生或改變的佈局信息無關，
瀏覽器都會強行刷新渲染隊列。
8.動畫實現過程當中，啓用GPU硬件加速:transform: tranlateZ(0)
9.爲動畫元素新建圖層,提升動畫元素的z-index