输入域名到网页渲染过程 ​

1. DNS 解析：

当用户在浏览器中输入域名时，首先需要进行 DNS 解析。浏览器会向本地 DNS 解析器发起查询请求，解析器会查询域名对应的 IP 地址。如果本地解析器没有缓存对应的 IP 地址，它会递归地向其他 DNS 服务器发起查询，直到找到对应的 IP 地址。

2. 建立 TCP 连接：

一旦浏览器获得目标服务器的 IP 地址，它将通过 TCP/IP 协议与服务器建立连接。这个过程中包括建立 TCP 连接、进行三次握手等步骤，确保浏览器与服务器之间的可靠通信。

3. 发送 HTTP 请求：

一旦建立了 TCP 连接，浏览器会发送一个 HTTP 请求到服务器，请求包括请求行、请求头和请求体。请求行包含请求方法（GET、POST 等）、请求的 URL 和协议版本。请求头包含一些额外的信息，如用户代理、Cookie 等。请求体包含一些特定的数据，如 POST 请求的表单数据。

4. 服务器处理请求：

服务器接收到请求后，会根据请求的 URL 和方法，找到对应的资源和处理程序。服务器可能会执行一些后端逻辑，如查询数据库、处理业务逻辑等。然后服务器会生成一个 HTTP 响应。

5. 接收响应：

浏览器接收到服务器返回的 HTTP 响应后，开始接收响应数据。响应包括响应状态码、响应头和响应体。响应状态码表示请求的处理状态，如 200 表示成功，404 表示资源未找到等。响应头包含一些额外的信息，如内容类型、缓存控制等。响应体则是服务器返回的实际数据，可以是 HTML、CSS、JavaScript、图片等资源。

6. 解析 HTML：

浏览器开始解析接收到的 HTML 文件。它会构建 DOM 树（Document Object Model），表示网页的结构和元素关系。同时，浏览器会解析 CSS 样式表，构建 CSSOM 树（CSS Object Model），表示网页的样式信息。

在html文件自上而下执行完后, 即生成了DOM树, 随后会去任务队列中查看哪些资源文件加载完毕, 将加载完毕的资源文件引入到栈内存中继续执行。引入到内存中的资源文件执行完毕后, 又会重复以上操作, 直到任务队列中的任务全部执行完毕。该过程也被称为Event Loop(事件循环), 任务队列中的任务会被分为微任务和宏任务。

7. 渲染页面：

浏览器使用 DOM 树和 CSSOM 树来构建渲染树（Render Tree），它包含需要显示在屏幕上的所有可见元素。然后浏览器通过布局（Layout）算法确定每个元素在页面中的位置和大小。最后，浏览器将渲染树绘制到屏幕上，完成页面的渲染。

• Layout回流: 根据生成的渲染树, 计算它们在设备视口内的确切位置和大小, 这个计算的阶段就是回流。
• Painting重绘: 根据渲染树以及回流得到的几何信息, 得到节点的绝对像素。
• Display: 将像素发送给GPU, 展示在页面上。

8. 执行 JavaScript：

如果页面包含 JavaScript 代码，浏览器会执行 JavaScript，它可能修改 DOM 树、CSSOM 树或执行其他操作。JavaScript 的执行可能会阻塞页面渲染，因此优化 JavaScript 代码的性能是很重要的。

9. 加载其他资源：

在页面渲染过程中，浏览器会继续加载其他资源，如图片、样式表、脚本文件等, 会开辟全新的线程去加载资源文件。也称为TASK QUEUE(任务队列)。这些资源可能通过请求其他 URL 或者从缓存中获取，然后被解析和渲染。