浏览器渲染引擎，提高css渲染速度。

一、渲染引擎
渲染引擎的职责是……渲染，也就是把请求的内容显示到浏览器屏幕上。
默认情况下渲染引擎可以显示HTML，XML文档以及图片。 通过插件（浏览器扩展）它可以显示其它类型文档。

二、各种渲染引擎
我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上：
Firefox使用Gecko —— Mozilla自家的渲染引擎；Safari 和 Chrome 都使用 Webkit。

最终决定浏览器表现出来的页面效果的差异是：渲染引擎 Rendering Engine（也叫做排版引擎），也就是我们通常所说的“浏览器内核”，负责解析网页语法（如HTML、JavaScript）并渲染、展示网页。相同的代码在不同的浏览器呈现出来的效果不一样，那么就很有可能是不同的浏览器内核导致的。

三、主要流程
渲染引擎开始于从网络层获取请求内容，一般是不超过8Ｋ的数据块。接下来就是渲染引擎的基本工作流程：

渲染引擎的基本工作流程（解析ＨＴＭＬ构建ＤＯＭ树，渲染树构建，渲染树布局，绘制渲染树）。
1、解析HTML以重建DOM树（Parsing HTML to construct the DOM tree ）：渲染引擎开始解析HTML文档，转换树中的标签到DOM节点，它被称为“内容树”。
2、构建渲染树（Render tree construction）：解析CSS（包括外部CSS文件和样式元素），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。
3、布局渲染树（Layout of the render tree）: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
4、绘制渲染树（Painting the render tree） : 遍历渲染树，每个节点将使用UI后端层来绘制。

一定要理解这是一个缓慢的过程，为了更好的用户体验，渲染引擎会尝试尽快的把内容显示出来。它不会等到所有ＨＴＭＬ都被解析完才创建并布局渲染树。它会 在处理后续内容的同时把处理过的局部内容先展示出来。

四、主要流程示例

图 2：Webkit主要流程

图 3：Mozilla的Gecko渲染引擎主要流程(3.6)

 

从图2和图3中可以看出，尽管Webkit与Gecko使用略微不同的术语，这个过程还是基本相同的。
Gecko里把格式化好的可视元素称做“帧树”（Frame tree）。每个元素就是一个帧（frame）。
Webkit则使用”渲染树”这个术语，渲染树由”渲染对象”组成。
Webkit里使用”layout”表示元素的布局，Gecko则称为”Reflow”。
Webkit使用”Attachment”来连接DOM节点与可视化信息以构建渲染树。
一个非语义上的小差别是Gecko在ＨＴＭＬ与ＤＯＭ树之间有一个附加的层 ，称作”content sink”，是创建ＤＯＭ对象的工厂。

主要的流程就是：构建一个dom树，页面要显示的各元素都会创建到这个dom树当中，每当一个新元素加入到这个dom树当中，浏览器便会通过css引擎查遍css样式表，找到符合该元素的样式规则应用到这个元素上。

五、浏览器对CSS的匹配原理

浏览器CSS匹配是从右到左进行查找。比如之前说的DIV#divBoxpspan.red{color:red;}，浏 览器 的查找顺序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为 divBox的div元素，如果都存在则CSS匹配上。

浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。firefox称这种查 找方式为keyselector(关键字查询)，所谓的关键字就是样式规则中最后(最右边)的规则，上面的key就是span.red。

 

六、优化你的CSS
1.css 命名 、书写规范。
好的代码看上去就很整齐 很有条理性这样方便日后的维护和管理。
2.避免使用通配规则。
*{}  计算次数惊人！只对需要用到的元素进行选择。
3.css优先级。
选择器权重：内联样式：1000，id选择器：100， class选择器：10，标签选择器：1 。
上一篇有总结。CSS选择器的权重与优先规则？
4.少用滤镜，少用hack，少用position：absolute；。
5.尽量少的去对标签进行选择，而是用class。
如：#nav li{},可以为li加上nav_item的类名，如下选择.nav_item{}。
6.不要去用标签限定ID或者类选择符
如：ul#nav,应该简化为#nav。
如：div.box { color: #f00; }; 直接 可以 用类名， .box { color:#f00;}  这样浏览器找到这个class后 就不用再匹配是否存在div标签.从而提高了渲染效率。当然同一级的 有不同的样式可以这样写，但是不建议这样。
7.尽量少的去使用后代选择器，降低选择器的权重值，css的层级关系不要太深 用class直接代替多余的层级元素。
后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。
例如 .box .box-con .box-list li { line-height: 24px; } 这么长。。。增加代码量减小开发效率。刚也说了，css渲染是从上到下，从右到左的
所以直接这样写就可以了.box-list li { line-height: 24px; };
8.使用简写样式。
例如margin: 10px; 浏览器会解释为上下左右各有10px的外补丁。margin： 0 10px 浏览器解析为 左右有10px的外补丁。
9.平铺背景图片不要过小，影响渲染速率。
10.float使用要谨慎。
11.不要放空的class。
别放空的的class或没有的class在html代码中，这样无意义。
12.多用继承属性。
考虑继承 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

<style>
　　a:link,a:visited{color:#0000FF}
　　a:hover,a:active{color:#FF0000}
　　#zishu a:link,#zishu a:visited{ font-weight:bold}
　　#zishu a:hover,#zishu a:active{ font-style: italic;}
</style>
<div><a href="#">test</a><div>
<div id="zishu"><a href="#">jb51.net</a></div>

13.合理化布局（模块化布局）。
可以把样式划分为 基类 和扩展类 ;模块化布局 ：
模块基本相同的样式写在 基类里，不同的在重新用class来定义称为扩展类 。
14.在css渲染效率中id和class的效率是基本相当的。
class在第一次载入中被缓存，在层叠中会有更加好的效果，在根部元素采用id会具有更加好（id有微妙的速度优势）。