样式表的层叠顺序
1 .某个样式的属性声明可能出现在多个样式表中，也有可能在同一个样式表中出现多次。
2 .浏览器声明：浏览器默认样式
3 .用户普通声明
4 .作者普通声明
5 .作者重要声明 作者带有!important的声明
6 .用户重要声明 用户带有!important的声明
7 .
renderObject
1 .基于dom的可视节点，webkit来根据需要创建相应的RenderObject节点，这些节点也构成了一棵树，就是render树，基于render树，webkit也会根据需要来为他们中的某些节点创建新的renderLayer节点，从而形成renderlayer树
2 .render树的建立--基于dom
1 .dom的document节点
2 .dom中的可视化节点，例如html，body，div,非可视化节点不会建立render树节点,例如head,meta,script
3 .还有一些匿名render节点，该节点不对应于dom树种的任何节点
4 .
3 .render树建立之后，布局运算计算出相关的属性，其中有位置，大小是否浮动等，引擎根据这些参数，在浏览器中绘画元素。
4 .RenderObject及其子类
1 .有的是对应dom节点的类，有的是容器类，比如renderBlock类
2 .RenderBlock用来是用来表示块级元素， 为了处理上的方便，某些情况下需要建立匿名的RenderBlock对象，因为RenderBlock的子女必须都是内嵌的元素或者都是非内嵌的元素。所以，当它包含两种元素的时候，那么它会为相邻的内嵌元素创建一个块级RenderBlock节点，然后设置该节点为自己的子女并且设置这些内嵌元素为它的子女。这个看不懂。。。
renderLayer树
1 .基于render树建立起来的一颗新的树，一个renderLayer节点可以对应多个render节点
2 .基于以下情况，renderObject会建立新的renderLayer节点
1 .DOM树的document节点对应的renderView节点
2 .DOM树的document的子女节点，也就是html节点对应的renderBlock节点
3 .有透明效果的对象
4 .有节点溢出，overflow或者反射效果等
5 .canvas 2d和3d
6 .video节点对应的renderObject对象
3 .一个renderLayer建立之后，其所在的renderObject对象的所有后代均包含在该renderLayer，除非这些后代需要建立自己的renderLayer。而后代的renderLayer的父亲就是自己最近的祖先所在的不同的RenderLayer，这样他们也构成了一颗renderLayer树
4 .每个renderLayer对应的render节点内容均会被绘制在该renderLayer所对应的层次上。不同的renderlayer可以共享一个内部存储结构，也可以有自己的各自的后端存储。在gpu硬件加速的情况下，某些renderLayer可能会有自己的独立后端存储，而后通过合成器把这些不同的后端和成在一起，然后形成网页的可视化内容
5 .
利用浏览器css渲染原理写出高性能的css代码
1 .避免使用通配规则，比如*{}
2 .经量少用标签进行选择，而是使用class代替
3 .不要使用标签限定id或者class 如 ui #nav，应该直接简化
4 .尽量少的使用后代选择器，降低选择器的权重值，后代选择器的开销是最高的，精良将选择器的深度降到最低，不要超过三层，更多的使用类来关联每一个标签元素
5 .考虑继承，了解哪些属性是通过继承而来，避免对这些元素进行重复指定
6 .使用特定一类规则：tag这种匹配会花很多时间，通过给元素增加class，我们回到class分类进行细分，减少匹配时间
7 .避免使用孩子选择器在tag分类规则中，这会显著增加匹配时间。
8 .尽可能避免孩子选择器，
9 .css命名只要出现了层级，标签，就是一次额外的渲染，层级越多，渲染的开销也就越大。
10 .避免使用！important,大量的!important会使维护变得更加困难，因为他破坏了自然状态，级联在记得样式表里面。
11 .对非链接的元素使用hover伪选择器规则。特别是ie7,ie8
12 .style指定内联样式可能会导致reflows和页面跳动。
13 .将内联样式块和link元素从页面body移动到页面head中去，浏览器阻塞渲染网页知道所有外部的样式表都被下载，放在head中可以确保样式表被首先下载和解析
14 .指定图片的尺寸，为页面中所有图片指定宽度和高度可以消除不必要的reflow和repaints，使页面渲染速度更快
后代选择器
1 .当发生元素嵌套的时候，内层的元素就成为外层元素的后代。
2 .定义后代选择器的时候，外层元素写在前面，内层元素写在后面，中间使用空格 div p
高效css命名
1 .面向属性命名：这个之前用过，不过主要是用来进行布局。其余的样式好像没必要。对网站非通用元素，如果样式简单，对齐分离并使用面向属性的命名方法
2 .no id
3 .no 层级
4 .no 标签：层级标签和字母都是用来提高css优先级，去掉!important
5 .css 命名，只要出现了层级，出现了标签，就是一次额外的渲染，层级越多，渲染的开销越大。
6 .取舍复用组件和复用css样式的区别，其实还是复用css会带来更快的速度。
7 .css文件大小，越大的文件越唱的
8 .去掉多于的css样式，可以节约大约200-300ms的选择器匹配时间
9 .
css样式顺序
1 .外面的是按照权重来匹配样式
2 .相同类型选择器制定的样式，在样式表中，越后面优先级越高
3 .class="class2 class1" 并非是在元素class出现的顺序，在样式表文件中class1处于class2前面，此时仍然是class2的优先级更高
4 .里面的顺序:这也属于css优化的一部分
1 .定位属性:position，display,float,left,top,right,bottom,overflow,clear,z-index
2 .自身属性:width,height,padding,border,margin,margin,background.
3 .文字样式:font-family,font-size,font-style,font-weight,font-varient,color
4 .文本属性
5 .css3新增属性：content ,box-shadow,border-radius,transform
6 .这里css样式的遍历顺序完全是和浏览器渲染的步骤相契合。
