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