13：URL输入到页面渲染过程

从URL输入到页面渲染的过程是一个复杂而精细的流程，它涉及多个步骤和多个参与方（包括浏览器、DNS服务器、服务器等）。以下是这一过程的详细解析：

一、URL解析与DNS查找

1. URL解析：

   • 当用户在浏览器中输入一个URL并按下回车键时，浏览器首先会对URL进行解析。
   • 一个完整的URL包括协议（如http或https）、域名（如www.google.com）、端口（默认为80或443）、路径和查询参数等部分。

2. DNS查找：

   • 浏览器将URL中的域名发送给DNS服务器，以获取对应的IP地址。
   • DNS查找过程可能涉及本地缓存、本机缓存、hosts文件、路由器缓存、ISP DNS缓存以及DNS递归查询（从本地DNS服务器到权限DNS服务器，再到顶级DNS服务器，最后到根DNS服务器）。

二、TCP连接建立

1. 三次握手：

   • 浏览器使用HTTP或HTTPS协议与服务器建立TCP连接。
   • TCP连接建立过程涉及三次握手：客户端发送SYN包请求建立连接，服务器回应SYN-ACK包表示同意连接，最后客户端再发送ACK包确认连接建立。

三、HTTP请求处理

1. 发送HTTP请求：

   • 浏览器向服务器发送一个HTTP请求，包括请求方法（如GET、POST等）、请求头（如User-Agent、Cookie等）和请求体（POST请求时携带的数据）。

2. 服务器处理请求：

   • 服务器接收到HTTP请求后，会根据请求的内容进行处理。这可能涉及动态生成页面、查询数据库、读取文件等操作。

四、接收响应与页面渲染准备

1. 接收响应：

   • 服务器处理完请求后，会生成一个HTTP响应，包括状态码、响应头和响应体。
   • 浏览器接收到服务器的HTTP响应后，开始处理响应内容。

2. 准备渲染进程：

   • 浏览器进程检查当前URL是否与之前打开了渲染进程的页面的根域名相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程。

五、页面渲染

1. 解析HTML与构建DOM树：

   • 浏览器解析HTML内容，通过分词器将HTML字节流拆分为一个个Token，然后生成节点Node，最后解析成浏览器识别的DOM树结构。

2. 解析CSS与构建CSSOM树：

   • 浏览器解析CSS样式表，计算出每个元素的样式，并生成CSSOM树。

3. 构建渲染树：

   • 浏览器将DOM树和CSSOM树结合生成渲染树。

4. 布局与绘制：

   • 浏览器计算每个节点的几何信息（位置和大小），然后将渲染树的各个节点绘制到屏幕上。

5. 下载与执行资源：

   • 在页面渲染的过程中，浏览器会解析HTML文档中的链接，如CSS文件、JavaScript文件、图片等，并发送请求下载这些资源。
   • 当浏览器下载并解析完所有的HTML、CSS和JavaScript文件后，会开始执行页面中的JavaScript代码。JavaScript代码可以修改DOM树、处理用户交互等。

六、TCP连接终止

1. 四次挥手：

   • 当所有数据传输完成后，需要终止TCP连接以释放资源。TCP连接终止过程涉及四次挥手：主动关闭方发送FIN包表示数据发送完毕，被动关闭方收到FIN包后发送ACK包确认，然后被动关闭方发送FIN包表示数据也发送完毕，最后主动关闭方发送ACK包确认并等待一定时间后关闭连接。

综上所述，从URL输入到页面渲染的过程是一个涉及多个步骤和多个参与方的复杂流程。了解这一过程有助于我们更好地优化网页性能和提高用户体验。