Web 浏览器的工作原理 - 获取数据（第 2 部分，附插图）🚀

上一篇文章我们讨论了navigation浏览器显示网站的第一步。今天我们将进入下一步，看看如何resources get fetched……

2. 数据获取

HTTP 请求

与服务器建立安全连接后，浏览器将发送一个初始。首先，浏览器将请求页面的HTTP GET request标记（）文档。它将使用 HTTP 协议执行此操作。HTML

HTTP (Hypertext Transfer Protocol) is a protocol for fetching resources such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser.

方法（例如：POST、GET、PUT、PATCH、DELETE 等）
URI代表Uniform Resource Identifier.URI，用于标识互联网上的抽象或物理资源，例如网站或电子邮件地址。URI 最多可包含 5 个部分：

方案：用于说明正在使用的协议
authority：用于识别域名
path：用于显示资源的准确路径
query：用于表示一个请求动作
片段：用于指代资源的一部分



// URI parts
scheme :// authority path ? query # fragment

//URI example
https://example.com/users/user?name=Alice#address

https: // scheme name
example.com // authority
users/user // path
name=Alice // query
address // fragment

HTTP 标头字段- 是浏览器和服务器在每次 HTTP 请求和响应时发送和接收的字符串列表（通常对最终用户不可见）。在请求的情况下，它们包含有关要获取的资源或请求该资源的浏览器的更多信息。

如果您想查看这些标头的样子，请打开 Chrome 浏览器并打开开发者工具 (F12)。转到“网络”选项卡，然后选择FETCH/XHR。下面的屏幕截图是我刚刚在 Google 上搜索的Palm Springs，请求标头如下所示：

HTTP 响应

服务器收到请求后，会进行处理并回复HTTP response。在响应正文中，我们可以找到所有相关的标头以及我们请求的 HTML 文档的内容。

状态代码- 例如：200、400、401、504 网关超时等（我们的目标是200状态代码，因为它告诉我们一切正常并且请求成功）
响应头字段- 保存有关响应的其他信息，例如其位置或提供响应的服务器。

文档示例HTML如下：



<!doctype HTML>
<html>
 <head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>This is my page</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="mainScripts.js"></script>
</head>
<body>
  <h1 class="heading">This is my page</h1>
  <p>A paragraph with a <a href="https://example.com/about">link</a></p>
  <div>
    <img src="myImage.jpg" alt="image description"/>
  </div>
  <script src="sideEffectsScripts.js"></script>
</body>
</html>

对于我之前提到的同一个谷歌搜索，它reponse headers看起来是这样的：

如果我们查看 HTML 文档，会发现它引用了不同的CSS文件Javascript。浏览器在遇到这些链接之前不会请求这些文件，但这不会发生在此步骤，而是发生在parsing我们将在下一篇文章中讨论的阶段。此时，只有 HTML 被请求并从服务器接收。

此初始请求的响应包含收到的第一个数据字节。Time to First Byte(TTFB) 是用户发出请求（通过在地址栏中输入网站名称）和收到第一个 HTML 数据包（通常为 14kb）之间的时间。

TCP 慢启动和拥塞算法

TCP slow start是一种平衡网络连接速度的算法。第一个数据包为 14kb（或更小），其工作原理是逐渐增加传输的数据量，直到达到预定的阈值。客户端从服务器接收到每个数据包后，都会响应一个ACK message。由于连接容量有限，如果服务器发送的数据包数量过多且速度过快，这些数据包将被丢弃。客户端不会发送任何数据包ACK messages，因此服务器会将此视为拥塞。这就是 ACK 的congestion algorithms作用所在。它们监控发送的数据包和 ACK 消息流，以确定最佳流量速率，并创建稳定的流量。

参考资料：

文章来源：https://dev.to/arikaturika/how-web-browsers-work-part-2-with-illustrations-1gn5