一般来说，css注重的就是代码简洁，尽量缩短，代码过长，会影响加载速度。而且层级嵌套太多，对于其他人员可读性太差 。
写样式，最好不要超过3个以上的层级，只要能找到对应的标签设置样式即可。
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、为动画元素新建图层
