从输入 URL 到页面展示的过程

一、用户输入

当用户在浏览器地址栏中输入 URL，浏览器会利用智能匹配技术（例如历史记录和书签）提供输入建议。如果该网页的记录已存在于历史记录中，浏览器可能会从本地缓存中直接加载该页面。

二、DNS 解析

浏览器首先执行 DNS 解析，将域名转换成相应的 IP 地址。对于使用 HTTPS 协议的网站，浏览器还需要建立一个 TLS 连接。

注：DNS 解析结果可能在操作系统、浏览器或路由器等多个层级上缓存。

三、发送请求

• 建立 TCP 连接：通过三次握手过程与服务器建立稳定的 TCP 连接。
• 构建请求：浏览器构建完整的 HTTP 请求，包含请求方法、路径、版本和请求头信息（例如 Cookie）。
• 服务器响应：服务器处理收到的请求并返回相应的响应数据。

四、处理重定向

如果服务器返回 301 或 302 状态码，表示请求的资源已被重定向。浏览器将根据响应头中的 Location 字段自动重新发起请求。

五、处理响应

浏览器检查响应头的 Content-Type，以决定如何处理响应体。例如，text/html 类型的内容将被处理为 HTML 文档。

六、准备渲染进程

浏览器为待渲染的页面分配一个渲染进程。如果新页面与当前页面属于同一站点，浏览器通常会复用现有的渲染进程。

七、构建 DOM 树和 CSSOM 树

• 浏览器解析 HTML 文档以构建 DOM 树。在遇到外部资源（如图片或脚本）时，浏览器会异步加载这些资源。
• 同时，浏览器解析 CSS 文件以构建 CSSOM 树。

深入了解：DOM 树的构建与 CSSOM 树的构建是并行进行的。由于 JavaScript 可能会查询和修改页面的样式，浏览器必须等待 CSSOM 树构建完成才能继续渲染过程。这解释了为何推荐在 HTML 文档的头部加载 CSS，以减少对页面渲染的阻塞。

八、JavaScript 处理

JavaScript 被浏览器的 JS 引擎解析和执行，过程中可能会修改 DOM 和 CSSOM。

注意：JavaScript 执行可能会阻止 DOM 的构建，尤其是当遇到 <script> 标签时，除非该标签被标记为异步（async）或延迟（defer）。

九、构建渲染树

浏览器将 DOM 与 CSSOM 结合，构建出渲染树，以确定页面上每个节点的样式。

说明：渲染树仅包含页面上可见的元素，对于不可见的元素（例如，那些应用了 display: none 样式的元素），不会被包含在渲染树中。

十、布局与绘制

• 布局（Layout）：浏览器计算渲染树中每个节点的确切位置和大小。
• 绘制（Painting）：根据布局和渲染树的信息，浏览器将每个节点绘制到屏幕上。

重要：布局和绘制过程在页面生命周期中可能会重复进行，不仅仅发生在页面初次加载时。例如，当用户的交互导致 DOM 改变时，也会触发重新布局和绘制。

十一、合成

浏览器将页面内容分割为多层，并进行合成，以展示最终的页面。这一步骤可以优化某些复杂动画和变换的性能，因为它们可以在不重新布局和绘制的情况下处理。

十二、交互

页面加载完成后，用户便可与页面进行交互，包括点击、滚动等操作。