浏览器内核及特性
webkit笔记,主要来自 朱永盛 《WebKit技术内幕》 学习笔记,转载就注明原著,该书是国内仅有的Webkit内核的书籍,学习的好导师,推荐有兴趣的朋友可以购买
在浏览器中,有一个重要的模块,它主要的作用是将页面转变成 可视化(可听话)的图像(声音)结果,这就是浏览器内核,同城,它也被称为 渲染引擎
所谓渲染,就是根据描述 或者 定义构建数学模型,通过模型生成图像的过程
浏览器的渲染引擎 就是能够 HTML/CSS/JavaScript 文本 以及相应的资源文件 转换成 图像结果的模块
如图:
浏览器渲染引擎作用
渲染引擎有众多功能模块,下图分三层,最上层使用 虚线框住的是 渲染引擎 所 提供的功能
渲染引擎模块及其所依赖的模块
图中大致可以看出,一个渲染引擎主要包括 HTML解释器、CSS解释器、布局、和JavaScript引擎 等等还有绘图模块、网络没有表示出来
HTML解释器: 解释HTML文本的解释器,主要作用是将HTML文本解释成 DOM (文档对象模型)树,DOM 是一种文档的表示方法。
CSS解释器 : 级联样式表的解释器,它的作用是为了DOM中各个元素对象计算出样式信息,从而为计算最后网页的布局提供基础实施
布局 : 在 DOM 创建后,WebKit需要将其中的元素对象同样式信息结合起来,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部表示模型
JavaScript引擎: 使用JavaScript代码可以修改网页的内容,也能修改 CSS 的信息, JavaScript引擎能够解释JavaScript代码,并通过DOM 接口 和 CSSOM
接口来修改网页内容和样式信息,从而改变渲染的结果
绘图: 使用图形库将布局计算后的各个网页的节点绘制成图像结果
这些模块依赖很多其他的基础模块,包括 网络,存储,2D/3D图形,音频视频 和 图片解码器。
渲染引擎中还包括如何使用这些依赖模块。例如,李雨2D/3D图形库来实现高性能网页绘制 和 网页3D渲染
上图从左到右 解释了 渲染引擎的核心过程,先后关系由图中实线箭头表示。
从左上角开始,首先是网页内容,输入 到 HTML解释器, HTML解释器在解释它后 构建成一棵 DOM 树
期间,如果遇到 JavaScript 代码则交给 JavaScript 引擎去处理
如果网页中包含 CSS, 则交给 CSS 解释器去解释。
当 DOM 建立的时候,渲染引擎接受来自 CSS 解释器的样式信息,构建一个新的内部绘图模型。
该模型由布局模块计算模型内部各个元素的位置和大小信息,最后由绘图模块完成从该模型到绘图的绘制
图中虚线箭头表示在渲染过程中,每个阶段可能使用到其他模型。
网页下载会使用到网络和存储
计算布局和绘图使用 2D/3D的图像模块,同时因为要生成最后的可视化结果,这是需要开始解码音频、视频和图片,同其他内容一起绘制到最后的图像中