浏览器从输入url到渲染的过程

URL 解析：
当用户在浏览器地址栏输入 URL 时，浏览器会首先对 URL 进行解析。这个过程包括解析协议（如 HTTP、HTTPS）、域名、端口号和路径等信息。
DNS 解析：
把从输入的URL中解析出的域名发送给 DNS 服务器进行解析，以获取该域名对应的 IP 地址。如果 DNS 缓存中有对应的记录，则会直接返回 IP 地址；否则，DNS 解析器会向上级 DNS 服务器发送请求，直到找到目标域名的 IP 地址为止。
建立 TCP 连接：
浏览器通过解析得到的 IP 地址，使用 HTTP 协议向服务器发送一个 TCP 连接请求。在建立 TCP 连接的过程中，浏览器会执行三次握手，确保与服务器之间的可靠连接。
发送 HTTP 请求：
一旦建立了 TCP 连接，浏览器就会向服务器发送 HTTP 请求。这个请求中包含了用户请求的资源信息，如请求方法（GET、POST 等）、请求头、Cookies 等。
服务器处理请求：
服务器接收到浏览器发送的 HTTP 请求后，会根据请求的内容进行处理。这个过程包括读取请求头、执行服务器端代码（如 PHP、Python、Node.js 等）、访问数据库等操作。
服务器返回响应：
服务器处理完请求后，会生成一个 HTTP 响应，并将响应发送回浏览器。这个响应包含了请求的资源（如 HTML 文件、CSS 文件、JavaScript 文件、图片等）以及响应头信息。
接收响应数据：
浏览器接收到服务器返回的 HTTP 响应后，会开始接收响应的数据。这个过程涉及到 TCP 协议的数据传输和分段重组。
解析 HTML：
浏览器收到 HTML 文件后，会对其进行解析。这个过程包括构建 DOM 树、解析 CSS 和 JavaScript 文件的引用等操作。
构建 DOM 树：
浏览器会根据 HTML 文件中的标签和元素构建 DOM 树（文档对象模型），这是页面结构的内存表示形式。
构建 CSSOM 树：
浏览器会解析 CSS 文件，并构建 CSSOM 树（CSS 对象模型），这是样式信息的内存表示形式。
合并 DOM 和 CSSOM，生成 Render 树：
浏览器会将 DOM 树和 CSSOM 树合并，生成一个 Render 树，这个 Render 树包含了每个节点的可见样式信息。
布局计算：
浏览器根据 Render 树中的节点信息，进行布局计算。这个过程确定了每个节点在页面中的位置和大小。
绘制页面：
浏览器根据布局计算得到的信息，使用渲染引擎将页面内容绘制到屏幕上。
JavaScript 解析与执行：
如果页面中包含了 JavaScript 代码，浏览器会解析并执行这些代码。JavaScript 的执行可能会修改 DOM 树、CSSOM 树或触发重新布局和重绘。
页面渲染完成：
当所有的资源都被加载、解析和执行完成，并且页面内容已经被绘制到屏幕上时，页面渲染完成。