幕后故事：从你输入网址的那一刻起

最近在一次面试中，我被问到：“从你在浏览器中输入网址的那一刻起，会发生什么？” 虽然我大致了解了整个过程，但却无法清晰地描述出来。本文旨在为你（也为我自己）提供一个完整的流程图，展示从浏览器端到页面最终呈现的整个过程。它涵盖了浏览器组件和服务器端域名解析两方面。
那么，事不宜迟，让我们开始吧……

整体情况

虽然网页加载只需几秒钟，但后台却有很多操作在进行。为了简单起见，我们将这些操作分为三个主要流程：

1. 获取您的域名所指向的服务器的 IP 地址

2. 向服务器发送请求，获取要在用户界面上渲染的内容。

3. 构建、绘制和渲染页面

就是这样。就这么简单，只需三步。然而，当我们深入研究这两个黑盒子时，复杂之处就出现了——

1. IP地址解析。
2. 构建和渲染网页。

如果你是后端开发人员，那么前者对你来说至关重要；而对于前端开发人员来说，浏览器渲染才是重中之重。
无论如何，让我们一起来了解一下这两者。

使用域名服务器（DNS）将域名转换为 IP 地址

虽然本文并非旨在探讨深奥的理论（网上有很多相关资料），但我会简要总结一下为什么这个模块很重要。

我们人类记不住长长的数字，机器也理解不了我们复杂的语言。为了实现双赢，我们给服务器赋予名称（域名），而服务器的身份则由 IP 地址（数字）来表示。那么，我们如何弥合这两者之间的鸿沟并进行通信呢？域名服务器（DNS）就扮演着中间人的角色！
这就是它背后的运作原理：

如果图片在您的设备上显示太小，请见谅，我必须在一张流程图中塞入大量内容。我强烈建议您下载并分析每个组成部分，它们都很容易理解。

用户最终如何获得一个漂亮的网页

一旦我们解析出包含相关数据（网页）的服务器的 IP 地址，剩下的就是实际访问该服务器并获取所需内容。大多数情况下，我们会收到一个 HTML 页面作为响应，但有时也会收到 PDF 或其他内容类型，例如图像、JSON、XML 等。

在本节中，我们将看到浏览器如何将 HTML 文件（一堆节点、脚本和样式）转换为一个完整的可查看页面。

这只是个概述。如果您想深入了解每个浏览器组件的工作原理，请参考这里。这个网站堪称浏览器如何渲染包含嵌入式脚本和绘制样式的 HTML 的权威指南。

不过，我想在这里强调几点：
1.浏览器引擎承载着你的 JavaScript 环境，例如 Chrome 的 V8 引擎，它包含调用栈、内存堆、事件循环、Web API 等等。2
.渲染引擎负责将 HTML 节点解析成 DOM 树，然后再进一步解析成应用了 CSS 的渲染树进行显示。3
. 每当 HTML 解析器遇到script标签时，它都会暂停解析 DOM 元素（这一点非常重要！），并同步下载所有脚本。

结论

本文的目的在于帮助你将复杂的概念提炼成一个简洁明了的三分钟答案，以应对他人提出的“输入网址后会发生什么？”这个问题。当然，这方面的内容非常丰富，网上也有许多优秀的资源可供参考。以下参考文献中列举了一些。

参考

概览：
DNS 的工作原理；
将 HTML 渲染到浏览器中

感谢阅读！希望对您有所帮助！🦄🦄🦄