WebKit03-浏览器中的主流内核及其特征

960 阅读2分钟

「这是我参与2022首次更文挑战的第15天,活动详情查看:2022首次更文挑战」。

浏览器中的主流内核

从浏览器大战之后,市面上常见的浏览器有,IE、Chrome、Firefox

其对应的内核有 Gecko、WebKit、Trident

Chrome的内核是基于Safari的WebKit开源项目创建的,因此Safari和Chrome是同一个内核系列的,与之相同的还有,WebOS、ChromeOS、Android、新版的IE(Edge)

内核特征

我们上面知道,浏览器内核的主要作用是渲染页面,因此一般来说,它需要如下几个部分的功能和模块。

其中有

  • HTML解释器

    解释HTML文本的解释器,主要作用合适将HTML文本解释为DOM树。

  • CSS解释器

    级联样式表解释器,他的作用是为DOM中的各个元素对象计算出央视信息,从而为计算最后的网页的布局提供基础设施。

  • 布局

    在DOM创建之后,WebKit需要将其中的元素对象同样式信息结合起来,计算它们的大小位置等布局信息,形成一个能够表达所有信息的内部表示模型

  • JavaScript引擎

    使用JS代码可以修改网页的内容,也能修改CSS的信息,Javascript引擎能够解释JS代码并听过DOM接口和CSSOM接口来修改网页内容和样式信息,从而改变渲染的结果

  • 绘图

    使用图形库将布局计算后的各个网页节点绘制成图像结果。

image.png

内核渲染过程

内核渲染的过程实际上就是下面这张图片:

image.png

先将HTML页面输入到HTML解释器,HTML会在解释它后构建成一颗DOM树,期间如果遇见JavaScript代码则交给JS引擎去处理。如果包含CSS则交给CSS解释器去处理。当DOM建立时候,渲染引擎接受来自CSS解释器的样式信息,构建一个新的恶内部绘图模型,绘图模型可以由布局计算模块内部各个元素的位置和大小信息,最后由绘图模块完成从该模型到图像的绘制。

其中存在一些特殊情况,在渲染中,对应网页内容的下载,需要使用网络和存储,对于计算布局和绘图,需要使用2D/3D的图形模块,对应音视频以及图片则需要使用音视频分析模块以及图片解码器模块,最终一起绘制到最后的图像中。

渲染完成后,我们常见的网页还有交互行为,一般来说,这里需要一些持续的重复渲染的过程来处理。