这里我们以WebKit为主进行分析，其他浏览器内核基本与此相同

浏览器

浏览器我们都知道，就是在输入一个URL后，将URL变化成一个可视化，可操作的页面。在这个过程中，浏览器到底都有哪些模块，怎样完成这样一个效果的呢？
我们按照浏览器数据流的流向，可以将上述这个过程分成三个阶段。

  1. 从网页的URL到构建完DOM树。
  2. 从DOM树到构建完绘制上下文。
  3. 第三个阶段是从绘制上下文到生成最终的图像。

从网页的URL到构建完DOM树

URL TO DOM

  1. 用户输入URL后，调用资源类加载器加载改URL对应的网页。
  2. 加载器依赖网络模块建立连接，发送请求并接受应答。
  3. 接受到各种网页或者资源数据，这些资源有可能是同步的，又有可能是异步的。
  4. 网页被交给HTML解析器变成一系列的词语（Token）
  5. 解析器根据词语构建节点，形成DOM树。
  6. 如果节点是JavaScript代码，调用JavaScript引擎并执行。
  7. JavaScriptdiam可能会修改DOM树的结构。
  8. 如果节点需要依赖其他资源，如图片，CSS，视频等，调用资源加载器来加载它们。但是它们是异步的。不会阻塞当前DOM树的继续创建；如果是JavaScript资源URL(没有标记 async活defer)。则需要停止当前DOM树的创建，直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。

在上面这个过程中，有个非常重要的一点就是DOMConent事件和DOM的“onload”事件。这两事件分布发生在DOM树构建完之后，以及DOM树构建完，并且网页所依赖的资源都加载完之后才发生。完成上的系列操作后，接下来就是利用CSS和DOM树构架RenderObject树再到绘制上下文。

从DOM树到构建完绘制上下文

DOMTree to RenderObject

  1. CSS文件被CSS解释器解释成内部表示结构
  2. CSS解释器工作完成之后，在DOM树上附加解释后的样式信息，这既是RenderObject树。
  3. RenderObject节点在创建的同时，WebKit会根据网页的层次构建RenderLayer树，同时构建一个虚拟的绘图上下文。

从绘制上下文到生成最终的图像

构建为绘制上线文后，接下来就是根据绘制上下文生成最终图像了。这个主要依赖2D和3D图形库。如下图：
RenderObject to view

上面就是浏览器渲染的三个组要阶段。通过上面的分析，我们可以知道在DOM构建的过程中需要执行JavaScriptdiam，所以需要特别注意在DOM未构建完成是，不能访问DOM，对DOM进行操作。
关于页面的布局及计算参考： 布局计算

渲染

渲染其实是从绘制上下文到最终图像中的一部分，这儿提出来的主要原因是，后面的动画优化会有用。
每个RenderLayer对象可以看做为一个图层。最终图像就是由各个不同的RenderLayer合成(Compositing)的。