性能优化相关

CSS相关

讲浏览器回流、重绘等内容的一片翻译文章：
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样式的时候，注意：因为浏览器解析css文件时，解析规则是从右至左解析，所以最右边的为主解析器，这个主解析器最好不要匹配到N多元素，不然性能会很慢。如下示例：

// css
.container2 a {} //浏览器第一次会同时匹配到 .container1 下的a元素，然后再去排除不匹配的元素，严重影响加载性能
.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规则的优先级，是按照(a,b,c,d)的权重进行的：

• a代表style属性等内联样式
• b是选择器中id选择器的个数
• c是选择器中类、伪类、属性选择器的个数
• d是选择器中伪元素、标签选择器的个数

伪类和伪元素的区别（下面的话没怎么理解）：

伪类是给某些选择器添加特殊的效果；
伪元素是将特殊效果添加到某些选择器上。

其实伪类相当于多添加一个类就可以实现，如:hover :active :last-child等；
伪元素相当于多添加一个元素才可以实现，如::first-letter ::after ::before。css3规定伪类是单冒号，伪元素是双冒号，目前为了兼容，伪元素也使用单冒号。

2、尽量减少在js中操作style样式，尽量将样式放置于css样式表中。原因是：js中操作样式可能会引起浏览器的reflow和repaint，增加性能开销；写在样式表中的话，可以在浏览器解析的阶段就基本确定样式。
3、html5 中的 window.requestAnimationFrame可以优化动画执行，原理也是减少了浏览器的回流和重绘。http://www.jianshu.com/p/864caa12bad7
4、可以提前设置好image的宽高，这样浏览器在解析的时候，就会预留出已知的空间来放置后续加载成功的图片，而不是等图片加载成功后，再重新reflow，可以提高性能。

链接