WebKit 浏览器内幕之 浏览器特性/网页渲染过程

1、浏览器功能特性

• 网络：它是第一步，浏览器通过网络模块下载各种资源。如hmtl、 css、js 等等。
• 资源管理: 从网络下载或者获取本地资源，并将它们管理起来，这需要高效的管理机制。例如如何避免重复下载资源等。
• 多页面管理: 浏览器支持多页浏览，需要支持多个网页同时加载，如何解决多页面的相互影响和安全。
• 插件与扩展：插件，不仅能显示网页，而且能支持各种形式的插件和扩展。插件是用来显示网页特定的内容，而扩展是增加浏览器新功能的软件或压缩包。
• 帐户和同步：将浏览器的相关信息，例如历史书签等信息同步到服务器上给用户多系统下统一体验。
• 安全机制：本质上提供一个浏览的环境。避免用户信息被各种非法工窃取和破坏。
• 开发者工具： 对普通用户用处不大，但是对前端开发者来说，是一个必备的工具。

1.1 浏览器内核的功能特性

在浏览器中，有一个重要的模块，它的主要作用是将页面转化为可视化的图像结果，这就是浏览器内核。通常它也被称不渲染引擎。一个渲染引擎主要包括下面几个主要模块。

• HTML解释器: 解释HTML,主要将HTML 文本解释成 DOM 树，DOM 是一种文档表示的方法。
• css 解释器： 它的作用是为DOM中各个元素树计算出样式信息。从而为计算网页的布局提供基础设施。
• 布局： 在DOM 创建之后，Webkit 需要将其中的元素对象同样式信息结合起来，计算它们的大小位置布避信息，形成一个能够表示这所有信息的内部表示模型。
• javascript 引擎：使用js 代码，能够修改dom 结构，也能修改css .从而改变渲染结果。
• 绘图： 使用图形库将布局计算后的各个网页的节点绘制成图像结果。

这些模块是一起工作来完成网页的渲染过程。首先是网页内容，输入到HTML 解释器，HTML 解释器在解释它后构建成一颗DOM 树，这期间如果遇到js 代码，则交给js 引擎去处理；如果网页中包含css,则交给css 解释器去解释。当DOM 建立的时候，渲染引擎接来自css解释器的样式信息，构建一个新的内部绘图模型。该模型由布局模块计算模型各个元素的位置和大小信息，最后由绘图模块完成该模型到图像的绘制。

1.3 webkit 渲染过程

前面介绍这些模块，下面将这些模块进行具体的细化

• 当用户输入url的时候，webkit会调用其资源加载器加载该 url 对应的网页。
• 加载器依赖网络模块建立连接，发送请求并接收答复。
• webkit 接收到各种网页或者资源的数据，其中某些资源可能是同步或者是异步获取的。
• 网页被交给 HTML 解释器转变一系的词语 （TOKEN）
• 解释器根据词语构建 节点（node）,形成 Dom 树。
• 如果节点是 js 代码，则调用js 引擎执行。
• js 代码可能会修改 dom 树的结构。
• 如果节点依赖其他资源，如css image,则调用资源加载器来加载这们，但是它是异步的。不会阻碍 dom 树的继续创建；如果 js 资源的url 没有标明是异步加载。则会停止当前DOM 的创建，直到 js 资源 加载完成并执行才能继续 DOM 的创建。 上述的过程中，网页在被加载中会发 ‘DOMConent’ 事件和 DOM 的‘onload’ 事件，分别在 DOM 树构建完之后，以及DOM树构建完成并且网页依赖的资源都加载完成之后发生，因为某些资源的加载不会阻碍 DOM 树的构建，所以这两个事件基本上不会同时发生的。 接下来就是 webkit 利用css 和dom 树构建 renderObject 树直到绘图上下文，这一阶段的具体过程如下。
• css 文件 被css 解释器解释成内部表示的结构。
• css 解释器工作完之后，在DOM 树上附加解释后的样式信息，这就是 RenderObject 树。
• RenderObject 节点在创建的同时，webkit 会根据网页的层次结构创建RenderLayer 树，同时构建一个虚拟的绘图上下文。其中这中间还复杂的过程。 RenderObject 树的建立并不表示DOM 树会被销毁， DOM 树、RenderObject 树、RenderLayer 树、绘图上下文，这四个表示结构一直存在，直到网页被销毁，因为它们对于网页的渲染起了非常大的作用。 最后就是根据绘图上下文生成最终的图像，这一过程主要依赖2D和3D 图形库。

结束语：上面大概介绍一些浏览器 webkit 核心的部件的概述，以及它们合作 工作的过程。在后面对浏览器中主要的这些核心部件进行更加详细的分析。使大家更加深入的了解 浏览器。这可能帮助在优化代码可以更多方面的考虑。

转载于:https://juejin.im/post/5a976315f265da4e87010131