浏览器内核渲染引擎工作流程

阅读了《webkit技术内幕》，对浏览器渲染引擎的工作流程有了新的认识。

1.浏览器解析流程

用户访问一个网页浏览器要经过以下两个流程。

（1）加载

- **资源加载器**开启http线程，获取html页面。
- 获取页面之后，交由**html解释器**解析称dom节点，并构建成**dom树**。
- 在构建dom树的时候，如果遇到script标签，则调用**javascript引擎**进行解析。
- 在构建dom树的时候，如果遇到css，图片，音频，则调用**资源加载器**进行资源的下载
- 注：这里面script文件的下载是阻塞dom树生成的，而css，图片，音频文件的下载是和dom树的创建并行的。

从url到构建一棵完整的dom树，就是加载阶段的整个流程。

在dom树构建完毕时，会触发Domcontent事件
在资源全部加载完毕时，会触发onload事件。

（2） 渲染

- css文件下载之后，调用**css解释器**解释css文件，并依赖dom树生成**renderObject树**
- renderObject树再根据网页的层次结构，构建**renderLayer树**和**绘图上下文**
- 最后由绘图上下文绘制最终的图像。

从dom树到renderlayer树就是渲染阶段的整个流程。

加载阶段和渲染阶段有可能重叠，交叉。（我现在举不出例子）

2.例子

用户输入www.baidu.com会经历什么过程捏

1. 根据url进行缓存查找IP地址，如果缓存没有，寻找DNS服务器。最终找到url对应的IP地址。
2. 调用资源管理器，开启http线程，http GET baidu的网页。传输层三次握手。
3. 获取网页之后，交友html解释器解析成DOM树
4. 遇到了css资源和图片资源，异步下载
5. 遇到script标签，阻塞下载并解析
6. 发现js代码改变了dom结构，引起dom树的改变
7. dom树构建完毕，开始调用css解析器解析css文件，生成renderobject树
8. 根据层次结构生成renderlayer树和绘图上下文。
9. 根据绘图上下文调用操作系统的绘制工具绘制网页。

3.重绘和重排

（1）重绘（repaint）：

颜色等变化，尺寸没有发生变化

（1）重排（reflow）：

 尺寸发生了变化。代价昂贵。

浏览器会把这些动作放入一个flush队列，如果重回和重排的次数很多，flush队列一次性操作。

所以为了减少重绘和重排
尽量使用className的更替来进行css改变。

4.为什么script文件最好放在底部，css文件在顶部

script文件阻塞dom树的建立。

如果script放在底部，在dom树建立基本上结束的时候再来加载script文件。
也防止没有dom树，script无法操作dom树。

如果css文件在头部，就先加载css文件喽。更快的解释css文件，声称后面的render树，绘制图形。