浏览器渲染引擎

浏览器渲染引擎

主要模块

• 一个渲染引擎主要包括：HTML解析器，CSS解析器，javascript引擎，布局layout模块，绘图模块
  • HTML解析器：解释HTML文档的解析器，主要作用是将HTML文本解释成DOM树。
  • CSS解析器：级联样式表的解析器，它的作用是为DOM中的各个元素对象计算出样式信息，为布局提供基础设施
  • Javascript引擎：使用Javascript代码可以修改网页的内容，也能修改css的信息，javascript引擎能够解释javascript代码，并通过DOM接口和CSSOM接口来修改网页内容和样式信息，从而改变渲染的结果。
  • 布局（layout）：在DOM创建之后，Webkit需要将其中的元素对象同样式信息结合起来，计算他们的大小位置等布局信息，形成一个能表达这所有信息的内部表示模型
  • 绘图模块（paint）：使用图形库将布局计算后的各个网页的节点绘制成图像结果

以上这些模块依赖很多其他的基础模块，包括要使用到网络 存储 2D/3D图像 音频视频解码器 和 图片解码器。
所以渲染引擎中还会包括如何使用这些依赖模块的部分。

渲染过程

• 浏览器渲染页面的整个过程：浏览器会从上到下解析文档。

  1. 遇见 HTML 标记，调用HTML解析器解析为对应的 token （一个token就是一个标签文本的序列化）并构建 DOM