浏览器操作原理简介

浏览器通俗地说:

这是我们通常用于查看某些网页或查询某些内容的软件，即浏览器.

官方解释是:

Browser是一种软件，可以显示Web服务器或文件系统的HTML文件（标准通用标记语言的应用程序）的内容，并允许用户与这些文件进行交互.

通常理解为: 浏览网络，查询内容，几乎所有您想了解的内容都可以在浏览器中找到.

官方解释是: 向服务器发送请求，然后浏览器在您的窗口中显示您选择的网络资源. 这种资源通常是HTML文档（据我了解，它是一个网页），但也包含PDF浏览器加载图片原理，图片或其他类型的资源. 用户通过URI（统一资源标识符）指定此资源的位置.

现在，所有浏览器都不完全符合这些规范，并且仍在开发自己的独特扩展程序，这对Web开发人员造成了严重的兼容性问题.

1. 浏览器按引擎Trident引擎分类: Internet Explorer

Trident（也称为MSHTML），中文表示三叉戟. 它是Internet Explorer（Microsoft Windows操作系统（Windows）上的Web浏览器）的排版引擎的名称. 它被设计为软件组件（模块），这使其他软件开发人员可以轻松地将Web浏览功能添加到自己开发的应用程序中. （详细链接）

Webkit引擎: Chrome浏览器（基于28版之后的闪烁，闪烁是Webkit的一个分支）和Safari

WebKit中包含的WebCore排版引擎和JSCore引擎派生自KDE的KHTML和KJS引擎. 它们都是根据GPL条约许可的免费软件，并且支持BSD系统的开发. 因此，Webkit同时也是免费软件和开放源代码. 它的优点是高效，稳定，兼容性好，并且源代码结构清晰且易于维护. （详细链接）

Gecko引擎: Firefox

Gecko是用C ++编写的开源网页布局引擎. 当前由Mozilla系列Web浏览器和Netscape 6及更高版本的浏览器使用. 该软件最初由Netscape Communications Corporation开发，现在由Mozilla Foundation维护. 它为与Internet相关的应用程序提供了丰富的程序界面. （详细链接）

Presto引擎: 早期使用Opera，后来使用webkit引擎

Presto是Opera软件针对Opera 7.0-12.17开发的浏览器布局引擎. Presto取代了旧版Opera 4至6中使用的Elektra排版引擎，包括添加了动态功能，例如网页或其中的一部分可以响应DOM和Script语法事件而重新键入. （详细链接）

（1）用户界面-（打开浏览器时看到的几乎所有内容都属于用户界面），包括地址栏，前进/后退按钮，书签菜单等. 主窗口中显示的请求页面除外在浏览器中，所有其他显示的部分都属于用户界面. 显示屏的所有其他部分都属于用户界面.

（2）浏览器引擎在用户界面和渲染引擎之间传输指令.

（3）呈现引擎负责显示请求的内容. 如果请求的内容是HTML，则它负责解析HTML和CSS内容并在屏幕上显示解析的内容.

（4）网络-用于网络调用，例如HTTP请求. 该接口与平台无关，并提供所有平台的基础实现.

（5）后端的用户界面浏览器加载图片原理，用于绘制基本的小部件，例如组合框和窗口. 它公开了独立于平台的通用界面，并在底部使用了操作系统的用户界面方法.

（6）JavaScript解释器，用于解析和执行JavaScript代码.

（7）数据存储-这是持久层. 浏览器需要在硬盘上保存各种数据，例如cookie. 新的HTML规范（HTML5）定义了一个“网络”，它是一个完整的浏览器内部.

浏览器的组件如图所示:

渲染引擎的职责是渲染，即在浏览器窗口中显示请求的内容. 默认情况下，渲染引擎可以显示html，xml文档和图片. 它还可以借助插件（浏览器扩展）显示其他类型的数据. 例如，使用PDF阅读器插件可以显示PDF格式.

浏览器内核分为两部分: 渲染引擎​​和js引擎. 由于js引擎变得越来越独立，因此内核倾向于仅引用渲染引擎，因此渲染引擎也称为浏览器内核. 呈现引擎最初将通常以8K块的形式从网络层获取所请求文档的内容. 获取文档内容后，渲染引擎开始正式运行.

首先，浏览器解析HTML文档和CSS样式表以形成DOM树和CSSDOM树，然后将DOM树和CSSDOM树结合起来以形成渲染树. 这就是我们所说的渲染树. 然后，浏览器在渲染树中的每个渲染节点上执行布局处理，以计算每个元素的大小和位置. 确定其在屏幕上的位置，最后绘制. 通过遍历渲染树在屏幕上显示实际像素. 基本过程如图所示:

分析HTML以构建DOM树-“构建渲染树”-“布局渲染树”-“绘制渲染树

以上步骤是一个循序渐进的步骤，但是为了改善用户体验，浏览器在构建渲染树和渲染之前不等待所有html文档加载. 从网络层获取html文档时，他将首先呈现接收到的本地内容.

DOM: 文档对象模型（Document Object Model，简称DOM）是W3C组织推荐的用于处理可扩展标记语言的标准编程接口. 在网页上，组织页面（或文档）的对象以树形结构组织，用于表示文档中对象的标准模型称为DOM. 渲染引擎解析: 解析文档是将文档转换为具有一定含义的结构，编码可以理解和使用该结构. 解析的结果通常是表示文档结构的节点树，称为解析树或语法树.

1. IE下载的顺序是从上到下，渲染的顺序也是从上到下. 下载和渲染同时进行.

2. 呈现到页面的某个部分时，页面上方的所有部分均已下载（并不是说所有相关元素均已下载）

3. 如果遇到语义上解释的标记嵌入文件（JS脚本，CSS样式），则IE的下载过程将在此时启用单独的连接进行下载.

4. 下载后解析. 在解析过程中，请停止下载页面上的所有元素. 块加载

5. 样式表下载完成后，它将与以前下载的所有样式表一起解析. 解析完成后，所有先前的元素（包括先前已渲染的元素）将被重新渲染.

6. 如果JS和CSS中有任何重新定义，则稍后定义的函数将覆盖先前定义的函数

2.1无法并行下载和解析（块下载）

2.2引用JS时，浏览器发送js请求并等待请求返回. 由于浏览器需要稳定的DOM树结构，因此JS中的代码有可能直接更改DOM树结构，例如使用document.write或appendChild，甚至直接使用location.href进行跳转. 为了防止JS修改DOM树和重建DOM树，它会阻止其他下载和演示.

（摘录）

1，输入网址

2. 检查浏览器缓存，看是否有缓存. 如果有缓存，请继续检查缓存是否已过期. 如果尚未过期，请直接返回到缓存页面. 如果没有缓存或缓存过期，请发送请求.

3. 浏览器解析URL地址以获得协议，主机名，端口号和路径.

4. 获取主机IP地址的过程

（1）浏览器缓存

（2）主机缓存

（3）个主机文件

（4）路由器缓存

（5）DNS缓存

（6）DNS递归查询

5. 浏览器启动与服务器的TCP连接并执行三向握手，

5.1 TCP / IP协议

TCP / IP是基于两个原始协议TCP和IP的大量不同通信协议的集合.

TCP用于控制从应用程序到网络的数据传输.

TCP负责在数据传输之前将它们分为IP数据包，然后在它们到达时重新组合.

IP负责计算机之间的通信.

IP负责在Internet上发送和接收数据包.

（详细链接: ）

6. 三向握手连接后，浏览器将发送一个http请求（这是关键，请检查相关信息以详细了解有关请求格式的HTTP协议以及几个重要请求标头字段的含义）.

HTTP负责Web服务器和Web浏览器之间的通信.

HTTP用于将请求从Web客户端（浏览器）发送到Web服务器，并将内容（Web页面）从Web服务器返回到Web客户端.

7. 服务器接收到请求并转移到相关的服务程序，在此期间可能需要连接和操作（主要分为get和post请求）.

8. 服务器查看是否需要缓存. 服务器处理请求并发出响应（这部分也很重要，请查阅该信息以了解http响应标头的每个字段的含义）

9. 服务器根据请求标头中包含的信息确定是否需要关闭TCP连接（如果需要关闭，则需要四个wave处理过程）

10. 浏览器解码收到的响应

11. 浏览器解析收到的响应，并根据响应的内容（如果是HTML文件）构造DOM树，渲染树和渲染树

12. 处理其他嵌入式资源，例如css文件，js文件，图片文件，音频和视频文件等. 处理过程与上述步骤相似，在此不再赘述.

参考:

MiYu.com是一个的软件定制开发平台. 该平台是注册软件研发工程师100W +. 它可以根据客户要求定制任何软件. 凭借丰富的软件开发经验和出色的设计能力，它具有独特的保证体系. 为避免延误工期和软件产品质量问题，如果您有软件开发需求，请咨询.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-200469-1.html