作为一个绝大部分工作是给浏览器打工的前端狗来说，觉得还是有必要了解一下浏览器的内核关于前端方面的技术。这里主要记录一下 Webkit 内核前端相关的一些东西,主要内容是总结《webkit技术内幕》一书里的。

Webkit 是苹果发起的一个开源项目，后来谷歌用这个项目以 webkit 创建了一个新的项目 Chromium，我们平常用的 Chrome 浏览器一般都是基于 Chromium 开发出来的稳定版本。也就是说 苹果的sf和谷歌的chrome 浏览器都是基于 webkit 内核的(前两年 chrome基于webkit分离出来了一个新的blink内核，就目前而言，Blink的渲染和WebKit是一样，但是，以后两者将各自走不同的路，这个另说)。

浏览器的功能就不多介绍了，主要介绍浏览器的渲染引擎即 webkit内核。webkit 作为浏览器的渲染引擎能够将 html/css/js文本及相应的资源文件转换成图像结果。它里面包含一些很重要的模块，当然作为浏览器的一部分，webkit工作时还要依赖一些其他的模块。 可以从下面这个图来理解：

可以看出渲染引擎大致包括HTML解释器，CSS解释器，布局和JavaScript引擎等模块。这些模块可能又依赖其他的基础模块，比如依赖第二层的一些基础模块。

我们可以通过下图了解这些模块是如何一起完成网页的基本渲染过程的。

首先是网页内容，送到HTML解释器。HTML解释器在解释它后形成DOM树，中间如果遇到JavaScript代码则交给JavaScript引擎去处理。如果页面包含CSS，则交给CSS解释器去解析。当DOM建立的时候，接受来自CSS解释的样式信息，构建一个新的内部绘图模型。该模型由布局模块计算模型内部的各个元素的位置和大小信息，最后由绘图模块完成从该模型到图像的绘制。

最后解释图中虚线箭头的指向含义。它们表示在渲染过程中，每个阶段可能使用到的其他模块。在网页内容的下载中，需要使用到网络和存储，这个是显而易见地。但计算布局和绘图的时候，需要使用2D/3D的图形模块，同时因为要生成最后的可视化结果，这时候需要开始解码音频视频和图片，同其它内容一起绘制到最后的图像中。 在渲染完成之后，用户可能需要跟渲染的结果进行交互，或者网页自身有动画，一般而言，这会持续的重新渲染过程。

扫码关注w3ctech微信公众号