DAY32-浏览器的工作原理

1.导航

导航是加载网页的第一步。它指的是当用户通过点击一个链接、在浏览器地址栏中写下一个网址、提交一个表格等方式请求一个网页时发生的过程。

DNS 查询（解决网址问题）

导航到一个网页的第一步是找到该网页的静态资源位置（HTML、CSS、Javascript和其他类型的文件）如果我们导航到 example.com ，HTML 页面位于 IP 地址为 93.184.216.34 的服务器上（对我们来说，网站是域名，但对计算机来说，它们是 IP 地址）。如果我们以前从未访问过这个网站，就必须进行域名系统（DNS）查询。

通过DNS将域名解析成IP地址，然后进行握手

TCP (Transmission Control Protocol) 握手

一旦浏览器知道了网站的 IP 地址，它将尝试通过 TCP 三次握手（也称为 SYN-SYN-ACK，或者更准确的说是 SYN、SYN-ACK、ACK，因为 TCP 有三个消息传输，用于协商和启动两台计算机之间的TCP 会话），与持有资源的服务器建立连接。

TLS协商

对于通过 HTTPS 建立的安全连接，需要进行另一次握手。这种握手（TLS协商）决定了哪个密码将被用于加密通信，验证服务器，并在开始实际的数据传输之前建立一个安全的连接。

传输层安全（TLS）是现已废弃的安全套接字层（SSL）的继任者，是一种加密协议，旨在通过计算机网络提供通信安全。该协议被广泛用于电子邮件和即时通讯等应用，但它在确保 HTTPS安全方面的应用仍然是最公开的。由于应用程序可以使用或不使用 TLS（或SSL）进行通信，因此客户（浏览器）有必要要求服务器建立 TLS 连接。

2.获取数据

在上一节中，我们谈到了导航，这是浏览器显示网站的第一步。现在，我们将进入下一个步骤，看看如何获取资源。

HTTP 请求

在我们与服务器建立安全连接后，浏览器将发送一个初始的 HTTP GET 请求。首先，浏览器将请求页面的 HTML 文件。它将使用 HTTP 协议来做这件事。

HTTP 响应

一旦服务器收到请求，它将对其进行处理并回复一个 HTTP 响应。在响应的正文中，我们可以找到所有相关的响应头和我们请求的HTML文档的内容

3.HTML 解析

到目前为止，我们讨论了导航和数据获取。 今天我们将讨论解析，特别是 HTML 解析。

我们看到在向服务器发出初始请求后，浏览器如何收到包含我们尝试访问的网页的 HTML 资源（第一块数据）的响应。 现在浏览器的工作就是开始解析数据。

解析是指将程序分析并转换为运行时环境实际可以运行的内部格式

换句话说，解析意味着将我们编写的代码作为文本（HTML、CSS）并将其转换为浏览器可以使用的内容。 解析将由浏览器引擎完成（不要与浏览器的 Javascript 引擎混淆）。

浏览器引擎是每个主要浏览器的核心组件，它的主要作用是结合结构 (HTML) 和样式 (CSS)，以便它可以在我们的屏幕上绘制网页。 它还负责找出哪些代码片段是交互式的。 我们不应将其视为一个单独的软件，而应将其视为更大软件（在我们的例子中为浏览器）的一部分。

Gecko 它是由 Mozilla 为 Firefox 开发的。 过去，它曾为其他几种浏览器提供支持，但目前，除了 Firefox，Tor 和 Waterfox 是唯一仍在使用 Gecko 的浏览器。 它是用 C++ 和 JavaScript 编写的，自 2016 年起，还用 Rust 编写。

WebKit 它主要由 Apple 为 Safari 开发。 它还为 GNOME Web (Epiphany) 和 Otter 提供支持。 （令人惊讶的是，在 iOS 上，包括 Firefox 和 Chrome 在内的所有浏览器也由 WebKit 提供支持）。 它是用 C++ 编写的。

Blink，Chromium 的一部分它最初是 WebKit 的一个分支，主要由 Google 为 Chrome 开发。 它还为 Edge、Brave、Silk、Vivaldi、Opera 和大多数其他浏览器项目（一些通过 QtWebEngine）提供支持。 它是用 C++ 编写的。

即使请求页面的 HTML 大于初始的 14KB 数据包，浏览器也会开始解析并尝试根据其拥有的数据呈现体验。 HTML 解析涉及两个步骤：词法分析 和 树构造（构建称为 DOM 树的东西）。

词法分析

它将一些输入转换为标签（源代码的基本组件）。 想象一下，我们将一段英文文本分解成单词，其中单词就是标签。

浏览器工作原理 - 掘金