假如您正在为浏览器开发应用程序，那么理解浏览器的实际工作方式非常重要。请继续阅读以取得精彩的概述！

在过去几年中，当Internet Explorer以90％的使用份额占据市场主导地位时，开发人员过去常常将IE视为一个黑盒子，除了查看呈现的代码外无其余操作。然而，现在是开源浏览器的时代。随着Firefox和Chrome等浏览器覆盖超过50％的使用份额，开发人员很容易看到幕后发生的事情。简而言之，有数千行C ++代码。让我们简要理解浏览器的工作原理。

浏览器的结构

浏览器的主要组件是：

1. 客户界面 - 包括前进和后退按钮，书签，地址栏等，以及显示所请求页面的窗口。
2. 浏览器引擎 - 它命令渲染引擎和客户界面之间的操作。
3. 渲染引擎 - 渲染引擎 的主要功能是显示请求的内容。例如，假如请求HTML内容，则引擎会解析CSS和HTML，并且在解析内容时，它会显示在屏幕上。
4. 客户界面后台 - 可用于绘制窗口或者组合框等基本图像。后台仅公开通用平台独立接口。在其下方，操作系统使用客户界面方法。
5. JS解释器 - 内置解释器解析和执行JavaScript和所有其余类型的脚本。
6. 网络 - 执行HTTP请求和响应。
7. 数据存储 - 所有类型的数据（如cookie）都由浏览器在本地保存。浏览器也支持WebSQL，FileSystem和localStorage等存储机制。

流程

网络层为呈现引擎提供所请求文档的内容。内容通常以每块大小约8kb的块传输。一旦发生这种情况，就会发生以下流程：

• 内容树由呈现引擎创立，其中HTML元素被解析并转换为DOM节点。解析内部和外部CSS中的样式数据，并使用可视化信息和样式来创立渲染树。
• 具备特定颜色和尺寸的矩形排列在渲染树中。它们的目的是以正确的顺序在屏幕上呈现。
• 构建渲染树后，它将遵循布局过程，其中每个节点都被赋予准确的坐标，根据这些坐标，它们应显示在屏幕上。
• 最后阶段是绘画。渲染树中的每个节点将根据UI后台层中编写的代码进行设计。绘画通常按以下顺序进行：
• 首先分配背景颜色。
• 紧接着是背景图像。
• 边界已分配。
• 孩子们堆积如山。
• 页面大纲已创立。

渲染行业内发生的所有过程都是逐步发生的。然而，渲染引擎的工作是尽快在屏幕上显示内容以提供更好的客户体验。这就是为什么，它不是一次解析HTML并构建渲染树的内容，而是开始构建树的少量部分，而其余部分则在后台进行解析和构建。让我们详细理解布局，这是页面生命周期的复杂部分。

DOM和CSS对象模型构建

在渲染引擎的第一步中，解析HTML文档，并将解析后的元素转换为DOM树中的节点。树中的每个元素都表示为父节点，子节点包含在父节点中。

当浏览器正在解析HTML时，它面向“link”标记，该标记引用链接到页面的外部CSS。它估计需要链接来呈现整个页面。立即发送请求以解析CSS页面。

布局

在创立后将渲染器增加到树中时，它没有任何大小或者位置。布局是计算这些值的手段。

HTML使用基于流的布局模型。这意味着，在大多数情况下，布局只要一次完成。稍后放置在布局树中的元素不会影响先前放置的元素的几何。因而，布局可以以全向方式进行。尽管可能存在少量例外情况。表中需要屡次传递。

所有渲染器都包含一个布局方法，该方法通过帧层次结构中的子元素递归发生。在默认的HTML页面中，根渲染器放置在（0,0）坐标处，其尺寸用作可见的浏览器窗口的一部分，称为 视口。

解决流程后跟布局：

1. 渲染的Parent决定宽度。
2. 它越过儿童并设置他们的水平和垂直坐标。
3. 仅在需要时调用子布局。
4. 父级使用子级的累积高度，边距和填充来计算其自身的高度，从而由层次结构中位于其上方的父级渲染器使用该高度。
5. 脏渲染器的值设置为false。
6. 假如您查看开发人员控制台，您会发现一个包含一系列矩形框的盒状结构，一个放在另一个框内。这是一个CSS框模型，它由容器组成，这些容器代表文档树中的元素，并按照视觉模型的方式布局。
7. 每个框包含一个内容区域，可能包含也可能不包含附近的边框，填充，边距等。

绘画

在绘制中，paint() 调用该 方法以在组件上呈现UI基础结构，自己设置样式等。绘画可以全局发生，一次绘制整个渲染树，也可以按增量顺序进行，其中元素按上下文顺序堆叠。

当更改网页的任何自己设置样式时，浏览器将执行所需的最少操作数，由于任何小的更改都将导致重新绘制整个元素，并且布局将更改其位置并重新呈现整个树。

分层显示元素

元素的z-index属性会扣除元素放置在堆栈中的位置。在堆栈中，在后面对齐的元素首先被绘制，而具备更高z-index值的元素被排列在前面并且最后被绘制。这些堆栈通常有两种类型：

• 具备z-index属性的容器或者框形成本地堆栈。
• HTML的视口形成外部堆栈。

如今使用的浏览器大多是免费软件，功能齐全，不仅可以呈现和显示网页，还可以呈现Web应用程序。其中少量提供插件，允许客户获取多媒体相关信息。在使用开发人员控制台和构建交互式Web应用程序之前，清楚地理解浏览器的工作原理对Web开发人员非常有利，由于每个浏览器的开发方式都不同，因而呈现的方式不同。

这是网站在不同浏览器上看起来不同的主要起因。因而，有必要在所有浏览器上测试任何网站。

所以，理解浏览器，开发和测试！

快乐的开发和快乐的测试！