CSS相關(guān)
講瀏覽器回流、重繪等內(nèi)容的一片翻譯文章：
https://github.com/shanshanfei/translation/blob/master/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E6%9C%BA%E5%88%B6
1、寫css樣式的時(shí)候，注意：因?yàn)闉g覽器解析css文件時(shí)，解析規(guī)則是從右至左解析，所以最右邊的為主解析器，這個主解析器最好不要匹配到N多元素，不然性能會很慢。如下示例：
// css
.container2 a {} //瀏覽器第一次會同時(shí)匹配到 .container1 下的a元素，然后再去排除不匹配的元素，嚴(yán)重影響加載性能
.container2 .link {} //這樣就比上面的性能好很多
// html
<div class="container1">
<a href=""></a>
<a href=""></a>
<!-- 成百上千個a元素 -->
<a href=""></a>
</div>
<div class="container2">
<a href="" class="link"></a>
</div>
順便提下css規(guī)則的優(yōu)先級，是按照(a,b,c,d)的權(quán)重進(jìn)行的：
- a代表style屬性等內(nèi)聯(lián)樣式
- b是選擇器中id選擇器的個數(shù)
- c是選擇器中類、偽類、屬性選擇器的個數(shù)
- d是選擇器中偽元素、標(biāo)簽選擇器的個數(shù)
偽類和偽元素的區(qū)別（下面的話沒怎么理解）：
偽類是給某些選擇器添加特殊的效果；
偽元素是將特殊效果添加到某些選擇器上。
其實(shí)偽類相當(dāng)于多添加一個類就可以實(shí)現(xiàn)，如:hover :active :last-child等；
偽元素相當(dāng)于多添加一個元素才可以實(shí)現(xiàn)，如::first-letter ::after ::before。css3規(guī)定偽類是單冒號，偽元素是雙冒號，目前為了兼容，偽元素也使用單冒號。
2、盡量減少在js中操作style樣式，盡量將樣式放置于css樣式表中。原因是：js中操作樣式可能會引起瀏覽器的reflow和repaint，增加性能開銷；寫在樣式表中的話，可以在瀏覽器解析的階段就基本確定樣式。
3、html5 中的 window.requestAnimationFrame可以優(yōu)化動畫執(zhí)行，原理也是減少了瀏覽器的回流和重繪。http://m.itdecent.cn/p/864caa12bad7
4、可以提前設(shè)置好image的寬高，這樣瀏覽器在解析的時(shí)候，就會預(yù)留出已知的空間來放置后續(xù)加載成功的圖片，而不是等圖片加載成功后，再重新reflow，可以提高性能。
