浏览器和浏览器内核

时间：2023-07-02 22:09:01 | 来源：网站运营

时间：2023-07-02 22:09:01 来源：网站运营

浏览器和浏览器内核：

浏览器特性

从最初的仅支持简单功能到如今支持种类繁多的功能和特性，浏览器一直在向前发展，可以预见，今后浏览器的哪些功能呢？力会越来越强。

那么目前一个浏览器应该包括哪些功能呢？

大体上来讲，浏览器的这些功能包括

网络、资源管理、网页浏览、多页面管理、插件和扩展、书签管理、历史记录管理、设置管理、下载管理、账户和同步、安全机制、隐私管理、外观卞题、开发者工具等。下面是对它们之中的一些重要功能的详细介绍。

• 网络： 它是第一步，浏览器通过网络模块来下载各种各样的资源，例如 HTML 文本、 JavascriPt 代码、样式表、图片、音视频文件等。网络部分其实非常重要，因为它耗时比较长而且需要安全访问互联网上的资源。
• 资源管理： 从网络下载或者本地获取资源，并将它们管理起来，这需要高效的管理机制。例如如何避免重复下载资源、缓存资源等，都是它们需要解决的问题。
• 网页浏览： 这是浏览器的核心也是最基本、最重要的功能，它通过网络下载资源并从资源管理器获得资源，将它们转变为可视化的结果，这也是后面介绍的浏览器内核最重要的功能。这部分会分成多个章节在后面逐一介绍。
• 多页面管理： 很多浏览器支持多页面浏览，所以需要支持多个网页同时加载，这个让浏览器变得更复杂。同时，如何解决多页面的相互影响和安全等问题也非常重要，为此，一些浏览器做了大量的工作，例如可能会使用多线程或是进程绘制网页。
• 插件和扩展： 这是现代浏览器的一个重要特征，它们不仅能显示网页，而且还能支持各种形式的插件和扩展。插件是用来显示网页特定内容的，而扩展能增加浏览器新功能的软件或压缩包，目前常见的插件比如ActiveX插件等，扩展则和浏览器密切相关，常见的有FireFox扩展和Chromium扩展。
• 账户和同步： 将浏览器的相关信息，例如历史信息、书签等信息同步到服务器给用户一个多个系统下的统一体验，对用户非常友好也是浏览器易用性的一个显著标识。
• 安全机制： 本质是提供一个安全的浏览器环境，避免给用户信息被各种非法工具所窃取或破坏，这可能包括了显示用户访问的网站是否安全、为网站设置安全级别、防止浏览器被恶意代码攻击等。
• 开发者工具： 对普通用户用处不大，但对网页开发者来说意义非比寻常，一个优秀的开发者工具可以帮助审查HTML元素、调试JavaScript脚本、改善网页性能等。

还有一个值得一提的就是浏览器的多操作系统支持，包括桌面和移动两个领域。 让我们看看目前主流浏览器所支持的主流操作系统情况，如表1-1所示。从中我们可以看出，Chrome支持目前所有主流的操作系统，后面依次是Firefbx、Safari和IE。

不过，因为iOS的一些特殊限制，使得Chrome虽然发布了 iOS版，但是其内核仍然 不是自身的，还是iOS系统默认的。而Firefox和IE则直接没有iOS版。

代理和浏览器行为

用户代理（ User Agent ）是个很奇怪的东西，其作用是表明浏览器的身份，因而往联网的内容供应商够知道发送请求的浏览器身份，浏览器能够支持于什么样的功能

因此浏览器发送不同的网页内容。例如通常Chrome 的桌而版和 Android 版发送不同的网页内容以适应屏幕和操作系统的差或者是因为不同的浏览器支持的标准不一样，这样做的目的当然是为了避免浏览器不支持的功能以及获得更好的用户体验。

比如下面一段代码

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

内核和主流内核

在浏览器中，有一个最重要的模块，它主要的作用就是要页面转变为可视化（准确上来说还要可听化）的图像结果，这就是浏览器内核。通常，它也被称为渲染引擎。

所谓的渲染，就是根据描述或者定义构建数学模型，通过模型生成图像的过程。浏览器的渲染引擎就是能够将 HTML/CSS/JavaScript 文本以及相应的资源文件转化成图像结果的模块，如图1-3所示，这里暂时把它看成一个黑盒，其中的细节就是本书中的重点。

目前，主流的渲染引擎包括了 Triden，Gecko 和 WebKit，它们分别是 IE，火狐和 Chrome内核（2013年，Google 宣布了 Blink 内核，它其实是从 Webkit 复制出去的），同一个渲染引擎，虽然可能有很多不同的变化，可以被多个浏览器所采用。

内核特征

到目前为止，渲染引擎对我们而言还是一个黑盒子，黑盒子中包含了什么以及有什么作用，我们还一无所知，本小节我们来一起探究一下其中的蹊跷。

根据渲染引擎所提供的渲染网页的功能，一般而言，需要包含图1-4中含的众多功能模块，图中主要分成三层，最上层使用虚线框住的是渲染引擎所提供的功能。

从图中可以大致看出，一个渲染引擎主要包括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 的图形模块，同时因为要生成最后的可视化结果，这时候就需要开始解码音频、视频和图片，同其它内容一起绘制到最后的图像中。

在渲染完成之后，用户可能需要跟渲染的结果进行交互，或者网页自身有操作，一般而言，这需要持续的重复渲染过程。




持续更新中。。。

参考

《WebKit技术内幕》