当我们在浏览器的地址栏中输入一个URL（统一资源定位符），然后按下回车键，浏览器就开始加载和呈现网页内容。这个过程涉及多个步骤和技术，下面将详细解释从输入URL到页面渲染的完整过程。

#1. URL 解析

首先，浏览器会解析输入的URL，提取出其中的协议（如HTTP或HTTPS）、域名、端口号、路径和查询参数等信息。这些信息将在后续的请求过程中使用。

#2. DNS 查询

一旦浏览器获得了域名，它就需要将域名转换成对应的IP地址。为了完成这一步骤，浏览器会发起DNS（域名系统）查询，向本地DNS服务器或者公共DNS服务器请求域名对应的IP地址。

#3. 建立网络连接

有了目标服务器的IP地址后，浏览器就要与服务器建立起网络连接。这通常需要使用TCP/IP协议，浏览器会通过创建一个与服务器的套接字连接来完成这一步骤。

#4. 发起 HTTP 请求

在网络连接建立后，浏览器会向服务器发起一个HTTP请求。这个请求中包含了之前解析的URL信息以及其他一些附加的请求头信息。

#5. 服务器处理请求

服务器接收到浏览器发送的HTTP请求后，会根据请求的URL和其他头部信息，进行相应的处理。这个处理的过程可能涉及一系列的操作，比如请求重定向、身份验证、访问权限检查、反向代理等。

#6. 服务器返回响应

服务器在处理完请求后，会生成一个HTTP响应，并将响应中的内容和相关的数据返回给浏览器。在响应中，除了数据本身外，还包含了响应头信息，用于描述响应的一些元数据，如内容类型、响应码等。

#7. 下载资源

一旦浏览器接收到服务器返回的HTTP响应，它将开始下载响应中的资源。这些资源可能包括HTML、CSS、JavaScript、图片、视频等。

#8. 构建 DOM 树

在下载HTML资源后，浏览器会解析HTML，并构建出一个DOM（文档对象模型）树。DOM树是表示HTML结构的树状数据结构，它将页面的各个HTML元素以及它们的关系表示出来。

#9. 构建 CSSOM 树

在下载CSS资源后，浏览器会解析CSS，并构建出一个CSSOM（CSS对象模型）树。这棵树描述了CSS样式规则以及它们应用于DOM元素的规则。

#10. 渲染页面

有了DOM树和CSSOM树后，浏览器将开始将它们合并，创建一个渲染树（也称为渲染对象树）。渲染树描述了页面的实际布局和样式信息。

#11. 页面布局

在创建渲染树后，浏览器将根据渲染树中的布局信息，确定每个元素在页面中的位置和大小。

#12. 绘制页面

最后一步是将渲染树中的内容绘制到屏幕上。这个过程通常由 GPU（图形处理器）来完成，它会将渲染树中的每个元素转换成对应的像素，最终呈现在用户的屏幕上。 这就是从输入URL到页面渲染的整个过程。在这个过程中，浏览器通过多个步骤来解析URL、获取资源、构建DOM树和CSSOM树，最终将页面渲染出来。对于开发者来说，了解这个过程可以帮助我们优化网页的加载速度和性能，提升用户体验。

掘金上发现一篇讲的比较详细的文章 史上最详细的经典面试题 从输入URL到看到页面发生了什么？