CSS3(以下简称C3)是一种用于屏幕上渲染html,xml的一种语言，C3主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。
早在2001年W3C就完成了CSS3的草案规范。CSS3规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容。
这些模块独立实现和发布，也为日后CSS的扩展奠定了基础。另外一方面，由于受支持设备和浏览器厂商的限制，设备或者厂商可以有选择地支持一部分模块，支持CSS3的一个子集，这样有利于CSS3的推广。
1、使用html解析器将html页面转化成浏览器能够理解的dom树 （ParseHTML）
2、将css解析成浏览器能够理解的css树（ 通过link标签引入的css才会走这一步，如果css是写到html里的话在第一步就解析了 ）
3、样式计算（Relcalculate Style）
4、dom树和css树生成布局树（Layout）
5、根据布局树生成图层树 —— 重排. (pre-paint) （Update Layer Tree）.
6、绘制（背景颜色、边框等）（按照图层去一个个绘制） —— 重绘（paint）
7、组合图层 —— 合成（Composite Layers）
图层树的几种情况：
1、css3D
2、position:fixed
3、video
4、canvas
5、css3动画加载的时候作为一个单独的图层
浏览器每次可以接收64kb的数据，例如一个图片是120kb大小，那么浏览器将分成2次才能接收完数据
1、css解析的时候，浏览器会开一个线程去解析html，去开一个线程去解析css，这样会阻塞浏览器的渲染，但是不会阻塞dom的解析。
2、js解析的时候，会阻塞浏览器的渲染，会阻塞dom的解析，会阻塞js的执行
重排和重绘都是以图层为单位去操作，所以如果是一些变化的元素，最好将它单独作为一个图层隔离起来进行操作
1、重排：计算元素在窗口的几何位置
2、重绘：计算元素在窗口具体的呈现
1、元素位置移动尽量使用transform代替top、left
1.1、直接使用transform会触发重排和重绘
1.2、结合position:relative使用时只触发重绘
1.3、作为单独图层时，不触发重排和重绘（会交给GPU进程去处理）
2、使用opacity代替visibility
2.1、使用visibility会触发重绘
2.2、使用opacity既触发重排，也触发重绘ß
2.3、配合图层使用，opacity不触发重排和重绘
3、多次改变样式的操作合并成一次
4、利用文档碎片（documentFragment）
5、不要把某些dom节点的属性值放到循环里当成循环的变量
查询属性值的时候会触发重排、重绘！！
6、为动画元素新建图层
就是说如果b类的前面（不一定要紧挨着）曾经出现过a类，则该b类被选中，比如：
<style>.a~.b{background-color:red}
</style>
<div class=b>.b 这个不会被选中，因为它前面没有a</div>
<div class=b>.b 同上</div>
<div class=a>.a 这里出现了a</div>
<div class=b>.b 这个会被选中，因为它前面出现了a</div>
<div class=b>.b 同上</div>
