目录

浏览器及其工作原理

Web 浏览器是什么?

Web 浏览器可以将您带到互联网的任何角落。它从 Web 上的其他区块检索信息并将其显示在您的桌面或移动设备上。信息通过超文本传输协议进行传输,而该协议定义了文本、图像和视频在网上的传输方式。这些信息需要以一致的格式共享和显示,让世界上任何地方使用任何浏览器的人都能看到。

遗憾的是,并非所有浏览器厂商都选择以相同的方式解释格式。对于用户而言,这意味着看到的网站的外观和功能可能会存在差异。建立浏览器之间的一致性,让所有用户皆可畅享互联网,而不论他们选择的是哪款浏览器,此即为 Web 标准。

当 Web 浏览器从连接到互联网的服务器上获取数据时,它会使用一种被称为渲染引擎的软件将数据转换为文本和图像。这些数据使用超文本标记语言(HTML)所编写,Web 浏览器将阅读这些代码,生成我们在互联网上看到、听到和感受到的内容。

超链接允许用户沿路径访问网上的其他页面或网站。每个网页、图像和视频都有自己唯一的统一资源定位符(URL),也称为网址。当浏览器访问服务器中的数据时,网址会告诉浏览器在哪里寻找 HTML 中描述的每个项目,然后告诉浏览器它在网页上的位置。

浏览器的主要结构

  1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
  2. 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
  3. 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
  4. 网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
  5. 用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。
  6. JavaScript 解释器。用于解析和执行 JavaScript 代码。
  7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了「网络数据库」,这是一个完整(但是轻便)的浏览器内数据库。

//gcore.jsdelivr.net/gh/G2/i@data/static_files/images/2021/html5rocks-layers.png
浏览器的主要组件

Web 浏览器如何工作?

//gcore.jsdelivr.net/gh/G2/i@data/static_files/images/2021/html5rocks-flow.png
渲染引擎的基本流程

渲染引擎一开始会从网络层获取请求文档的内容。

渲染引擎将开始解析 HTML 文档,并将各标记逐个转化成内容树上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构:渲染树。

渲染树包含多个带有视觉属性(如颜色和尺寸)的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。

渲染树构建完毕之后,进入布局处理阶段,也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树,由用户界面后端层将每个节点绘制出来。

需要着重指出的是,这是一个渐进的过程。为达到更好的用户体验,渲染引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后,就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时,渲染引擎会将部分内容解析并显示出来。

Cookie(不是那种好吃的饼干)

网站将有关您的信息保存在名为 Cookie 的文件中。它们会保存在您的计算机上,供您下次访问该站点时使用。再次访问,网站代码将会读取该文件,以确定是您。例如,当您访问网站时,网页会记住您的用户名和密码——这通常是用 Cookie 实现的。

还有一些 Cookie 记录了更多关于您的信息,包括但不限于您的兴趣、Web 浏览模式等等。这意味着一个网站可以向您提供更具针对性的内容——通常是以广告的形式。有几种 Cookie 被称为第三方 Cookie,来自于此前您从未访问过的网站,可以做到跨网站跟踪并收集您的信息,这些信息多半会出售给其他公司。有时您可以选择拦截这类 Cookie,但并非所有浏览器都允许您这么做。

当您访问网站时,网页会记住您的用户名和密码。这通常是用 Cookie 实现的。

详细介绍

浏览器的工作原理详解

参考地址