html - 从浏览器地址栏输入url到浏览器得到渲染页面的完整过程是怎样的？

Question

这个问题我想了很久。这是一个大的问题，因为它几乎涵盖了与网络开发相关的所有角落。

按照我的理解，流程应该是这样的:

1. 在地址栏中输入网址
2. 将根据您的网络配置向 DNS 服务器发送请求
3. DNS 会将您路由到域名的真实 IP
4. 一个请求(带有完整的Http header)将被发送到服务器(以3的IP来标识)的80端口(假设我们不指定其他端口)
5. 服务器将搜索监听端口并将请求转发到正在监听 80 端口的应用程序(这里假设 nginx)或另一台服务器(然后 3 的服务器将像负载均衡器)
6. nginx 会尝试将 url 与其配置匹配并直接作为静态页面，或者调用相应的脚本解释器(例如 PHP/Python)或其他应用程序来获取动态内容(使用数据库查询或其他逻辑)
7. 一个带有完整的Http响应头的html将被发送回浏览器
8. 浏览器将使用其解析器解析 html 的 DOM
9. 外部资源(JS/CSS/images/flash/videos..)将按顺序(或不？)请求
10. 对于JS，由JS引擎执行
11. 对于CSS，由CSS引擎渲染，HTML的显示会根据CSS调整(是否也按顺序？)
12. 如果 DOM 中有 iframe，则从步骤 1-12 开始执行一个单独的相同过程

以上是我的理解，不知道对不对？精确到什么程度？我错过了什么吗？

如果它是正确的(或几乎正确的)，我希望:

1. 使步骤的描述更加准确，如果有很大的变化，请写下您的步骤
2. 对您最熟悉的每个步骤进行深入解释。
3. 每步一个答案。其他人可以在每个答案的评论中进行补充。

我希望这个帖子可以帮助所有网络开发人员更好地了解我们每天所做的事情。

我会根据答案更新这个问题。

谢谢。

Answer 1

正如您所说，这是一个广泛的问题，可以在其中详细介绍许多主题。您描述的顺序没有任何问题，但是您遗漏了很多细节。仅举几例:

• DNS 层可以帮助根据地理位置将客户端定向到不同的服务器，以帮助实现负载平衡和延迟最小化，并且一台服务器可以响应来自许多不同 DNS 名称的请求。
• 浏览器可以发出不同类型的请求(GET、POST、HEAD 等)，并且通常包含几个不同的 header ，包括 cookie、浏览器功能、语言偏好等。
• 大多数浏览器通常会维护缓存以避免多次下载内容，并使用各种技术来确定文件的缓存版本是否有效。
• 在现代网页中，许多不同类型的文件(HTML、CSS、图像、JavaScript、视频、Flash 等)之间通常存在复杂的交互，网络开发人员通常需要详细了解浏览器之间的差异，以便保持他们的适合所有人的页面

这些主题中的每一个以及更多主题都可以进行详细讨论。也许就您感兴趣的主题提出更具体的问题更实际？