Understanding the Role of Rendering Engine in Browsers

By Jash Unadkat, Technical Content Writer at BrowserStack - November 15, 2019

在深入理解浏览器中渲染引擎的作用前，让我们先快速了解一下web浏览器的底层架构

web浏览器是一个通过图像用户界面，让用户访问和展示web页面或其他在线内容的软件应用程序。参照下图来理解构建web浏览器所涉及的关键组件。

User Interface: 此组件允许终端用户与web页面上的所有可见元素交互。可见元素包括地址栏、home按钮，next按钮，及被终端用户请求的获取和展示web页面的其他元素。
Browser Engine: 它是每个web浏览器的核心组件。浏览器引擎是用户界面和渲染引擎的中介或桥梁。它通过用户界面的输入来查询和操作渲染引擎。
Rendering Engine: 顾名思义，此组件负责将用户请求的特定的web页面渲染到他们的屏幕上。它解析通过css美化和格式化后的HTML和XML文档以及图片，生成展示在用户界面上的最终布局。

注意: 每个浏览器都有自己独特的渲染引擎。不同的浏览器版本可能有不同的渲染引擎。下面列出了几个常见浏览器的渲染引擎：

Networking: 此组件负责管理使用标准协议（如HTTP或FTP）的网络调用。它还负责与互联网通信相关的安全问题。
JavaScript Interpreter: 顾名思义，它负责解析和执行嵌套在网站中的JavaScript代码。一旦解析结果产生，就被发送到渲染引擎去用户界面展示。
UI Backend: 此组件使用底层操作系统的用户界面方法。它主要用来绘制基本小部件（windows和combo boxes)。
Data Storage/Persistence: 它是一个持久层。Web 浏览器需要在本地存储各种类型的数据，例如 cookie。因此，浏览器必须兼容 WebSQL、IndexedDB、FileSystem 等数据存储机制。

因为我们已经了解了构建 Web 浏览器所涉及的关键组件，让我们深入研究渲染引擎的作用。

一旦用户请求特定文档，渲染引擎就会开始获取所请求文档的内容。这是通过网络层完成的。渲染引擎开始以 8 KB 的块从网络层接收该特定文档的内容。之后，渲染引擎的基本流程就开始了。

Browser rendering engine

四个基本步骤包括:

请求的 HTML 页面（包括外部 CSS 文件和样式元素）由渲染引擎解析为块。然后将 HTML 元素转换为 DOM 节点以形成 “content tree”或“DOM tree”。
同时，浏览器也会创建一个render tree. 该树包括样式信息以及定义元素显示顺序的视觉指令。render tree确保内容以所需的顺序显示。
此外，渲染树会经历布局过程。 创建渲染树时，不会分配位置或尺寸。用于评估所需位置的计算值的整个过程被称为布局过程。在这个过程中，每个节点都被分配了精确的坐标。这确保了每个节点都出现在屏幕上的准确位置。
最后一步是绘制屏幕——遍历渲染树，并调用renderer的paint() 方法，该方法使用UI 后端层绘制屏幕上的每个节点。

如前所述，每个浏览器都有自己独特的渲染引擎。 所以很自然，每个浏览器都有自己的方式来解释用户屏幕上的网页。这就是 Web 开发人员在其网站的跨浏览器兼容性上面临的挑战。

这就是跨浏览器测试的意义所在。

跨浏览器测试是一种质量保证方法，用于验证web应用程序在跨多个浏览器时的功能和设计上的一致性。这些测试使QA团队能够通过响应性测试（当通过不同的浏览器或浏览器版本访问他们的网站时）来探索任何可能出现的问题。

组织和团队可以利用BrowserStack这样的在线平台，在各种真实的浏览器和设备上执行跨浏览器兼容性测试。例如，你可以在Windows 10上进行Edge测试，以确保他们的网页应用在微软Edge上运行得完美无缺。

通过了解渲染引擎的工作原理，Web 开发人员可以更深入地了解网站的运行方式。因此，他们可以更有效地开发、设计和部署内容。如果一个人理解了各种浏览器在用户屏幕上显示 Web 内容的细微差别，那么这人就更有能力创建与多个浏览器兼容的内容。

理解渲染引擎在浏览器中的作用及跨游览器兼容性测试简介（2nd Review)