在浏览器打开网页之前会发生什么？
本文的目的是帮助你了解当你在浏览器的地址栏中输入一个URL并按下回车键时会发生什么。
我们就以本站为例
解密URL
当用户输入一个URL并按下回车键时，浏览器首先开始对输入的URL进行解码。
分解URL，以找出 "协议"、"域名 "和 "路径名 "的内容。
https://juejin.cn/
复制代码在上述URL中，https是协议，juejin.cn是域名，/是路径名。
如果没有协议描述或不是有效的域，浏览器将把输入的文本传递给浏览器的默认搜索引擎。
检查HSTS列表
HSTS（HTTP严格传输安全）只是一个功能，它允许浏览器在用户试图通过http访问网站时自动将http替换为https。
它旨在保护通过http访问网站的用户免受中间人攻击。
通过DNS获取IP地址
DNS（Domain Name System）是一个将IP地址映射到域名的系统。
每个连接到互联网的设备（个人电脑、电话、服务器、路由器等）都有一个唯一的号码。 这个数字被称为IP地址。
当你拨打电话时，你要指定你要打电话的人的号码。 同样，当你在互联网上通信时，你通过IP地址指定对方。 IP地址是一个由点分隔的数字，如 "10.11.12.13"。
人类不善于记住像 "10.11.12.13"这样的一串数字，所以我们创建了一个系统，你可以输入一个域名，它将告诉你相应的IP地址是什么。 这就是DNS系统。
检查你的浏览器的缓存
首先，浏览器会通过自己的缓存，看看它是否已经知道你的IP地址。 这是因为如果你最近访问过该网站，你的IP地址可能仍在缓存中。
如果你的浏览器是谷歌浏览器，你可以检查下面的缓存DNS信息。
chrome://net-internals/#dns
复制代码如果它仍在缓存中，那么名称解析过程就完成了。
检查hosts文件
如果你的浏览器没有缓存，你现在可以去找主机文件。
hosts文件是一个操作系统配置文件，是一个描述TCP/IP网络上IP地址和主机名称之间对应关系的文本文件。
在互联网的早期，将域名翻译成IP地址的过程是通过一个叫做 "HOSTS.TXT "的文本文件完成的，这是hosts文件的原型。
这意味着互联网上的所有主机和它们的IP地址都被映射到一个单一的文件HOSTS.TXT中，你必须在你的电脑上参考这个文件来与其他主机通信。
# 在hosts文件中查看
sudo vi /private/etc/hosts
复制代码这就是你可以出去的方法。
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
复制代码它的书写格式是[IP地址][主机名]，如上面的 "127.0.0.1 localhost"。
当HOSTS.TXT首次被使用时（在20世纪70年代），只有几百个主机，所以有可能包括网络上每一个主机的信息。
然而，随着互联网的发展，HOSTS.TXT的规模不断扩大，到1983年，大约有数万个主机。 不再可能使用HOSTS.TXT来解析名字，因此创建了当前的DNS服务器来解析名字。
残余的hosts文件至今仍在使用。 在查询DNS服务器进行名称解析之前，浏览器会查看hosts文件。 如果它在文件中找到了主机名，名称解析过程就完成了。
调用一个存根解析器
如果在hosts文件中没有找到目标juejin.cn的IP地址，将查询DNS服务器。
浏览器首先调用一个存根解析器。 存根解析器是客户电脑中操作系统的一项功能。 存根解析器然后询问缓存DNS服务器 "你知道juejin.cn的IP地址吗？ 到缓存的DNS服务器。
如果缓存的DNS服务器有一个缓存
顾名思义，缓存DNS服务器将每次查询的结果存储在缓存中一段时间，这样，如果以后收到相同的查询，就可以重新使用并返回。
因此，如果你以前收到一个存根解析器的查询，说 "你知道juejin.cn的IP地址吗？ 我们将把该查询的结果返回给存根解析器，因为它应该被存储在缓存中。
存根解析器从它收到的结果中提取IP地址，并将其写入浏览器指定的内存区域。 这就结束了名称解析过程。
如果缓存的DNS服务器没有缓存
如果缓存的DNS服务器没有juejin.cn的查询缓存，它将查询 "根名称服务器"→".cn名称服务器"→"juejin.cn名称服务器"，而不是存根解析器。 当找到IP地址时，它向存根解析器返回一个查询结果，说 "找到IP地址"。 然后，存根解析器从查询结果中提取IP地址并将其写入浏览器指定的内存区域。
现在，浏览器已经得到了juejin.cn的IP地址，名称解析过程已经完成。
如果无法访问
它将四处寻找IP地址，如果仍然找不到，它将返回一个错误信息。 我想用户会看到这样一个屏幕（´∵）。
端口号
端口号是TCP/IP中的一个数字，用于指定与运行在同一台计算机上的几个软件中的哪一个进行通信。
如果你把IP地址比作一个电话号码，那么端口号就像一个电话号码，你打电话说："我想和____ 小姐说话，谢谢"。
你可以通过在URL的域名后面加上冒号（:），然后再加上你选择的端口号来指定你想说话的人。
例如，http://juejin.cn/ 将是http://juejin.cn:80/，而80是因为它是HTTP。
对于juejin.cn，端口是https://juejin.cn:443/，因为它是HTTPS。
我们无需在浏览器中输入URL中的端口号就可以访问一个网站，这是因为该方案自动为网站分配了一个端口，如80代表 "http:"，443代表 "https"。
发送一个HTTP请求
接下来，我们将看一下发送到网络服务器的HTTP请求。
HTTP请求是一个从浏览器发送到网络服务器的请求。 我们将看一下浏览器是如何发送HTTP请求的。
现在，我们从 "解码url "中知道了域名和路径名，浏览器使用它们来创建一个HTTP请求。
我听说HTTP请求是以 "请求行"、"头 "和 "消息体 "的格式创建的，但我不明白，所以我想通过点击命令来检查究竟发送了什么样的请求。
我使用了以下命令。
curl -v https://juejin.cn/
复制代码输出的HTTP请求的内容。
GET / HTTP/2
Host: juejin.cn
User-Agent: curl/7.64.1
Accept: */*
复制代码请求之后实际上是响应，但我们将在下一节 "发送HTTP响应 "中讨论这个问题。
为了便于理解，请求的结构如下图所示。
其中最重要的是第一行，即请求行。
GET / HTTP/2分别代表 "HTTP方法"、"目标URI "和 "HTTP版本"，从左端开始。
GET是最常用的方法，代表浏览器向网络服务器发出的检索页面的请求。 左边第二个"/"表示正在请求哪一个页面。 这是从URL中嵌入的路径名直接转录出来的。
另外，虽然格式是 "请求行"、"头 "和 "信息体"，但在实际请求中没有信息体，因为HTTP方法是GET。 在GET的情况下，方法和URL足以让网络服务器知道该怎么做，所以没有必要在信息体中写任何东西。
负载均衡器
负载均衡器是一种将网络服务器上的负载分配给多个服务器的设备。 它也被称为 "负载均衡器"。
当网络服务只用一台服务器运行时，当服务器因集中访问而停机时，它将被迫停止服务，因此，准备多台服务器是很常见的。
负载均衡器是一个将这些多个网络服务器绑定在一起的设备，并以平衡的方式分配来到网络服务器的请求。
负载均衡器能够进行健康检查，以跟踪服务器的状态，并进行会话维护，以确保来自同一客户的请求不断被路由到同一服务器。
健康检测
这是一个不断检查它下面的网络服务器是否正常工作的功能。
如果服务器不能正确响应，则被视为 "异常"，请求不会被发送到该服务器，而是发送到另一个正常的服务器。
会期维护
这是一个将同一用户的访问分配到同一服务器的函数。
如果没有这个功能，当用户登录后，负载均衡器在下一次通信中向不同的服务器发送请求时，服务器将不知道之前的通信状态，并会问 "你是谁？ 因为服务器不知道前一次通信的状态。
因此，来自同一用户的访问将被分配到同一服务器，例如通过检查发件人的IP地址。
还有一种使用cookie的会话维护方法，即具有相同cookie的通信总是被发送到同一个网络服务器。
发送一个HTTP响应
当一个请求被发送时，从网络服务器返回一个响应。
在 "发送HTTP请求 "中省略了HTTP响应的内容，其内容如下。
HTTP/2 200
etag: "de7-OJQMWJz+xf8wsmQufuQRjAHeH+c"
content-type: text/html; charset=utf-8
accept-ranges: none
vary: Accept-Encoding
x-cloud-trace-context: 0a770f14325a57bd2fca0a614fd11841;o=1
date: Mon, 08 Mar 2021 15:17:31 GMT
server: Google Frontend
content-length: 3559
<!doctype html>
<html >
<body >
</body>
</html>
复制代码与请求不同，响应的第一行被称为状态行，其中HTTP/2 200分别代表 "HTTP版本 "和 "状态代码"。
状态代码是一个表明请求是否成功或是否发生错误的代码。 在这种情况下，它是200，这意味着网络服务器已经成功地处理了该请求。
头中还有内容类型：text/html；charset=utf-8。 这是一个指示，表明信息体中的数据是什么格式。 在这种情况下，它表示 "该内容是一个HTML文件，其字符集是UTF-8"。 浏览器对此进行观察，并决定如何处理这些数据。
消息主体包含HTML，即请求的资源，如内容类型中所述。
当响应被返回时，数据被从消息体中检索出来并显示在浏览器中。
HTML的渲染
浏览器的渲染有四个主要阶段。 第一个过程是加载。 它加载HTML、CSS、JavaScript、图像和其他绘制所需的资源。 检索的第一个资源是HTML文件。
浏览器将按顺序从顶部加载这个HTML文件，如果它在途中发现任何外部资源，如CSS、JavaScript或图像，它将要求网络服务器检索它们。
然后，加载的资源被转换为渲染引擎的内部资源。
HTML被转换为DOM树，CSS被转换为CSSOM树。 然后在随后的渲染和绘画阶段使用这些材料。
一旦完成了这些，就该是编写脚本的时候了。
在Scripting中，词法分析、解析和编译过程已经完成，只有在这时才会执行JavaScript代码。
在ShareFull中，我们使用Vue作为我们的JavaScript框架，所以当JavaScript代码被执行时，Vue被调用。
如果Vue中有一个API调用进程，它将向API服务器发出请求以检索数据。
检索JSON数据
例如，ShareFull网页在屏幕的右上方显示登录用户的姓名和部门签名。 这些数据是通过使用API服务器获得的。
一个API服务器是一个使用API机制提供数据的服务器。
API服务器是一个使用API机制提供数据的服务器。 浏览器通过使用HTTP方法和参数向端点发送请求，从API服务器请求数据。
你想要的资源是通过在信息正文中提到它来指定的。 在报头中指定content-type:application/json，并以JSON格式发送请求。
API服务器将根据收到的请求发出一个SQL语句，查询数据库服务器，并检索数据。 然后将其格式化为JSON格式并返回给浏览器。 基本上，结构如下。
{
"data": {...},
"errors": [...]
}
复制代码数据是查询结果，错误则存储在错误中。 浏览器采取这些结果，并将其绘制出来。