#性能優化
###慎重選擇高消耗的樣式
---
高消耗屬性在繪制前需要瀏覽器進行大量計算：
* box-shadows
* border-radius
* transparency
* transforms
* CSS filters（性能殺手）
###避免過分重排
當發生重排的時候，瀏覽器需要重新計算布局位置與大小，[更多詳情](http://www.jianshu.com/p/e305ace24ddf)。
如果對于瀏覽器的渲染原理很有興趣的話，可以看看這篇文章：
[瀏覽器的工作原理：新式網絡瀏覽器幕后揭秘](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#Painting)
####常見的重排元素:
* width
* height
* padding
* margin
* display
* border-width
* position
* top
* left
* right
* bottom
* font-size
* float
* text-align
* overflow-y
* font-weight
* overflow
* font-family
* line-height
* vertical-align
* clear
* white-space
* min-height
###正確使用 Display 的屬性
Display 屬性會影響頁面的渲染，請合理使用。
* display: inline后不應該再使用 width、height、margin、padding 以及 float；
* display: inline-block 后不應該再使用 float；
* display: block 后不應該再使用 vertical-align；
* display: table-* 后不應該再使用 margin 或者 float；
###不濫用 Float
Float在渲染時計算量比較大，盡量減少使用。
>移動端可以使用flex布局，詳情可見：[使用 CSS 彈性盒子](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)、[Flex 布局教程：語法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)、[Flex 布局教程：實例篇
](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)
###動畫性能優化
動畫的實現原理，是利用了人眼的“視覺暫留”現象，在短時間內連續播放數幅靜止的畫面，使肉眼因視覺殘象產生錯覺，而誤以為畫面在“動”。
動畫的基本概念：
* 幀：在動畫過程中，每一幅靜止畫面即為一“幀”;
* 幀率：即每秒鐘播放的靜止畫面的數量，單位是fps(Frame per second);
* 幀時長：即每一幅靜止畫面的停留時間，單位一般是ms(毫秒);
* 跳幀(掉幀/丟幀)：在幀率固定的動畫中，某一幀的時長遠高于平均幀時長，導致其后續數幀被擠壓而丟失的現象。
一般瀏覽器的渲染刷新頻率是 60 fps，所以在網頁當中，幀率如果達到 50-60 fps 的動畫將會相當流暢，讓人感到舒適。
* 如果使用基于 javaScript 的動畫，盡量使用 requestAnimationFrame. 避免使用 setTimeout, setInterval.
* 避免通過類似 jQuery animate()-style 改變每幀的樣式，使用 CSS 聲明動畫會得到更好的瀏覽器優化。
* 使用 translate 取代 absolute 定位就會得到更好的 fps，動畫會更順滑。
###多利用硬件能力，如通過 3D 變形開啟 GPU 加速
一般在 Chrome 中，3D或透視變換（perspective transform）CSS屬性和對 opacity 進行 CSS 動畫會創建新的圖層，在硬件加速渲染通道的優化下，GPU 完成 3D 變形等操作后，將圖層進行復合操作（Compesite Layers），從而避免觸發瀏覽器大面積重繪和重排。
注：3D 變形會消耗更多的內存和功耗。
使用 translate3d 右移 500px 的動畫流暢度要明顯優于直接使用 left：
```css
.ball-1 {
transition: -webkit-transform .5s ease;
-webkit-transform: translate3d(0, 0, 0);
}
.ball-1.slidein{
-webkit-transform: translate3d(500px, 0, 0);
}
.ball-2 {
transition: left .5s ease; left：0;
}
.ball-2.slidein {
left：500px;
}
```
###提升 CSS 選擇器性能
CSS 選擇器對性能的影響源于瀏覽器匹配選擇器和文檔元素時所消耗的時間，所以優化選擇器的原則是應盡量避免使用消耗更多匹配時間的選擇器。而在這之前我們需要了解 CSS 選擇器匹配的機制， 如子選擇器規則：
```css
#header > a {font-weight:blod;}
```
我們中的大多數人都是從左到右的閱讀習慣，會習慣性的設定瀏覽器也是從左到右的方式進行匹配規則，推測這條規則的開銷并不高。
我們會假設瀏覽器以這樣的方式工作：尋找 id 為 header 的元素，然后將樣式規則應用到直系子元素中的 a 元素上。我們知道文檔中只有一個 id 為 header 的元素，并且它只有幾個 a 元素的子節點，所以這個 CSS 選擇器應該相當高效。
事實上，卻恰恰相反，CSS 選擇器是從右到左進行規則匹配。了解這個機制后，例子中看似高效的選擇器在實際中的匹配開銷是很高的，瀏覽器必須遍歷頁面中所有的 a 元素并且確定其父元素的 id 是否為 header 。
如果把例子的子選擇器改為后代選擇器則會開銷更多，在遍歷頁面中所有 a 元素后還需向其上級遍歷直到根節點。
```
#header a {font-weight:blod;}
```
理解了CSS選擇器從右到左匹配的機制后，明白只要當前選擇符的左邊還有其他選擇符，樣式系統就會繼續向左移動，直到找到和規則匹配的選擇符，或者因為不匹配而退出。我們把最右邊選擇符稱之為**關鍵選擇器**。——[更多詳情](http://www.jianshu.com/p/268c7f3dd7a6)
1、避免使用通用選擇器
```
/* not good */
.content * {color: red;}
```
瀏覽器匹配文檔中所有的元素后分別向上逐級匹配 class 為 content 的元素，直到文檔的根節點。因此其匹配開銷是非常大的，所以應避免使用關鍵選擇器是通配選擇器的情況。
2、避免使用標簽或 class 選擇器限制 id 選擇器
```
/* not good */
button#backButton {…}
/* good */
#newMenuIcon {…}
```
3、避免使用標簽限制 class 選擇器
```
/* not good */
treehead treerow treecell {…}
/* good */
treehead > treerow > treecell {…}
/* best */
.treecell-header {…}
```
4、避免使用多層標簽選擇器。使用 class 選擇器替換，減少css查找
```
/* not good */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* good */
.treecell-mailfolder {…}
```
5、避免使用子選擇器
```
/* not good */
treehead treerow treecell {…}
/* good */
treehead > treerow > treecell {…}
/* best */
.treecell-header {…}
```
6、使用繼承
```
/* not good */
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* good */
#bookmarkMenuItem { list-style-image: url(blah) }
```
