从输入网址到浏览器的地址栏以获取浏览器中呈现的页面的完整过程是什么？

Question

我正在考虑这个问题很长一段时间。这是一个大的问题，因为它几乎涵盖了与网络开发相关的所有角落。

根据我的理解，这个过程应该是：

1. 输入地址栏的网址
2. 将根据您的网络配置将请求发送到DNS服务器
3. DNS会将您转到域名的真实IP
4. 一个请求（带有完整的Http标头）将被发送到服务器（用3的IP来识别）的80端口（假设我们没有指定另一个端口）
5. 服务器将搜索侦听端口并将请求转发到正在侦听80端口的应用程序（比如说这里是nginx）或转发到另一台服务器（然后3的服务器就像负载均衡器）
6. nginx将尝试将url与其配置匹配并直接充当静态页面，或者调用相应的脚本解释器（例如PHP / Python）或其他应用程序来获取动态内容（使用DB查询或其他逻辑）
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. 每步一个答案。其他人可以在每个答案的评论中作出补充。

我希望这个主题可以帮助所有Web开发人员更好地了解我们每天的工作。

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

感谢。

Answer 1

正如您所说，这是一个广泛的问题，可以在许多主题上详细介绍。你描述的序列没有任何问题，但你遗漏了很多细节。提一下：

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

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

Answer 2

我也在寻找同样的事情，并发现这个非常详细的答案是在 github协作建立的

Answer 3

我可以在这里描述一点 -

确定要执行的文件/资源​​，要加载的语言解释器。

请原谅我，如果我在这里使用翻译错了。在我的回答中可能存在其他错误，我将在稍后尝试纠正它们并包含适当的技术术语。

当Web服务器（例如apache）收到URI时，它会检查是否存在与之匹配的任何现有重写规则。在这种情况下，重写的URI被采用。在任何一种情况下，如果没有文件名来结束URI，则加载默认文件，通常是index.html或index.php等。根据文件名的扩展名，服务器端的相应apache模块例如，加载编程语言支持PHP的mod_php，python的mod_python。适当的服务器端语言解释器（考虑像PHP这样的解释语言）然后为Web服务器准备最终的HTML或其他形式的输出，最终将其作为HTTP响应发送。

Answer 4

1. 您在浏览器的地址栏中输入maps.google.com（统一资源定位符），然后按Enter。
2. 每个URL都有一个与之关联的唯一IP地址。映射存储在名称服务器中，此过程称为域名系统。
3. 浏览器检查其缓存以找到URL的IP地址。
   • 如果找不到它，它将检查其操作系统以找到IP地址（gethostname）；
   • 然后检查路由器的缓存。
   • 然后检查ISP的缓存。如果那里不可用，则ISP向不同的名称服务器发出递归请求。
4. 它检查 com 名称服务器（我们有很多名称服务器，例如'in'，'mil'，'us'等），并将重定向到google.com
5. google.com名称服务器将在其DNS记录中找到maps.google.com的匹配IP地址，并将其返回给您的DNS递归器，然后将其发送回您的浏览器。

6. 浏览器启动与服务器的TCP连接。它使用三种方式的握手

   • 客户端计算机通过Internet将SYN数据包发送到服务器，询问是否为新连接打开。

   • 如果服务器具有开放的端口，可以接受并启动新的连接，则它将使用SYN / ACK数据包对SYN数据包进行确认应答。

   • 客户端将接收来自服务器的SYN / ACK数据包，并通过发送ACK数据包进行确认。 然后建立了TCP连接以进行数据传输！

7. 浏览器将发送GET请求，要求提供maps.google.com网页。如果您输入凭据或提交表单，则可能是POST请求。
8. 服务器发送响应。
9. 服务器一旦向浏览器提供资源（HTML，CSS，JS，图像等），它将经历以下过程：
   解析- HTML，CSS，JS
   渲染-构造DOM树→渲染树→渲染树的布局→绘制渲染树
   
10. 渲染引擎开始从网络层获取所请求文档的内容。通常将以8kB的块完成。
    
11. 根据损坏的响应构建DOM树。
    
12. 对于在HTML源代码中找到的每个新资源（通常是图像，样式表和JavaScript文件），都会向服务器发出新请求。
    
13. 在此阶段，浏览器将文档标记为交互式，并开始解析处于“延迟”模式的脚本：应在解析文档后执行的脚本。文档状态设置为“完成”，并触发“加载”事件。
    
14. 每个CSS文件都解析为一个StyleSheet对象，其中每个对象都包含带有选择器的CSS规则和与CSS语法相对应的对象。构建的树称为CSSCOM。
    
15. 在DOM和CSSOM之上，创建了一个渲染树，它是一组要渲染的对象。每个渲染对象都包含其对应的DOM对象（或文本块）以及计算出的样式。换句话说，渲染树描述了DOM的视觉表示。
    
16. 构建渲染树之后，它会经历“布局”过程。这意味着为每个节点提供应在屏幕上显示的确切坐标。
    
17. 下一阶段是绘画-将遍历渲染树，并使用UI后端层绘画每个节点。
    
18. 重新绘制：更改不影响元素在页面上位置的元素样式（例如背景颜色，边框颜色，可见性）时，浏览器只是使用应用的新样式再次重新绘制元素（这意味着发生“重新绘制”或“重新样式”）。
    
19. 重排：当更改影响文档的内容或结构或元素位置时，将发生重排（或重排）。