文章目录
- 1、用户输入URL：
- 2、URL解析：
- 3、DNS查询：
- 4、建立TCP连接：
- 5、发送HTTP请求：
- 6、服务器处理请求：
- 7、生成响应：
- 8、发送HTTP响应：
- 9、解析响应：
- 10、渲染页面：
- 11、布局和绘制：
- 12、执行脚本：
- 13、异步资源加载：
- 14、页面呈现：
浏览器输入URL到最终看到页面的过程涉及了一系列复杂的步骤。
1、用户输入URL：
用户在浏览器地址栏中输入或粘贴一个URL，并按回车键提交请求。
2、URL解析：
浏览器首先会对URL进行解析，确定协议（http、https等）、主机名和路径信息。
3、DNS查询：
浏览器向DNS服务器发起域名解析请求，获取与URL中的主机名对应的IP地址。如果本地DNS缓存中存在该域名，则直接返回IP地址；否则，递归查询DNS服务器直至获得IP地址。
4、建立TCP连接：
根据解析出的IP地址，浏览器与服务器建立TCP连接（对于HTTPS则是TLS/SSL握手，建立加密的TCP连接）。
5、发送HTTP请求：
浏览器准备好HTTP请求报文（包括请求行、请求头、可能的请求体），然后通过建立好的TCP连接将请求发送给服务器。请求报文包括请求方法（如GET、POST等）、请求URI、HTTP版本、以及可能的cookies和其他头部信息。
6、服务器处理请求：
服务器接收到请求后，由Web服务器软件（如Apache、Nginx等）进行解析，并将请求转发给合适的后端应用（如PHP、Node.js、Java等）进行处理。
7、生成响应：
后端应用处理请求，可能涉及数据库查询、文件读取等操作，然后生成包含相应数据的HTTP响应报文，报文包括状态码、响应头、以及响应体（如HTML、JSON等）。
8、发送HTTP响应：
服务器将响应报文通过TCP连接发送回浏览器。
9、解析响应：
浏览器接收HTTP响应，根据状态码判断请求是否成功。然后解析响应头和响应体，特别是Content-Type字段，以决定如何处理响应数据。
10、渲染页面：
如果响应体是HTML文档，浏览器开始构建DOM树（Document Object Model），解析CSS样式表并构建CSSOM树（CSS Object Model），然后将两者合并成渲染树（Render Tree）。
11、布局和绘制：
浏览器根据渲染树计算每个节点的几何位置和尺寸（布局），然后按照计算结果在屏幕上逐个绘制各个节点（绘画/渲染）。
12、执行脚本：
如果HTML文档中包含JavaScript脚本，浏览器会按顺序下载并执行这些脚本，脚本可能会修改DOM和CSSOM，从而引发重新布局和绘制。
13、异步资源加载：
在渲染过程中，浏览器并发地下载页面所需的其他资源，如图片、字体、JSON数据等，异步脚本也会在此阶段执行。
14、页面呈现：
当DOM树、CSSOM树、渲染树构建完毕，并完成必要的绘制后，用户就可以在浏览器窗口中看到完整的页面内容了。
整个过程涉及到网络通信、数据解析、渲染引擎等多个层面的工作，而且在实际过程中可能还包括预加载、缓存机制、错误处理等额外环节。