从 URL 到呈现实现【超详细】

在万维网的浩瀚世界中，当我们轻点一个 URL 时，一个看似简单的动作却暗藏着复杂而精妙的旅程。从域名解析到强缓存的查找，再到构建 DOM 树和样式的级联，一系列相互依存的步骤无缝衔接，将 URL 转换为您眼前栩栩如动的网页。让我们踏上这段旅程，深入探究从 URL 到呈现实现的超详细过程。

1. 域名解析

当您在浏览器的地址栏中输入一个 URL，如 www.example.com，第一步便是域名解析。浏览器的职责是将易于记忆的域名解析成计算机可以理解的 IP 地址。

为了实现这一目的，计算机使用称为域名系统（DNS）的分布式网络。DNS 是一本巨大的互联网地址簿，其中映射了域名和 IP 地址。当计算机需要解析域名时，它会向称为域名解析器（DNS 解析器）的专用计算机发出请求。DNS 解析器查找适当的记录并返回与该域名相关联的 IP 地址。

2. 缓存查找

在解析了域名之后，计算机需要获取网页的内容。这个过程从缓存查找开始。缓存是一块临时存储空间，其中存储了最近请求的网页副本。如果计算机在缓存中找到了请求的网页，它将直接从缓存中加载，从而避免向源站发送请求。

缓存可显著缩短网页加载时间，特别是对于重复访问的页面。但是，缓存也存在风险。如果源站上的页面已更新，而缓存中的副本是旧的，则用户将看到 outdated 的内容。为了解决此问题，浏览器的缓存策略包括了过期时间和更新机制，以确保加载的内容尽可能与源站同步。

3. 发送 HTTP 请求

如果缓存中找不到请求的网页，计算机将向源站发出 HTTP 请求。HTTP（超文本传输协议）是一种无状态协议，它规定了客户端（计算机）和服务端（源站）之间通信的方式。

HTTP 请求包含的信息包括：

• 请求方法： GET、POST、PUT 等，表示客户端希望执行的操作。
• 请求标头： 提供有关客户端和请求的其他信息，如语言首选项、cookie 等。
• 请求体： 当请求方法需要传输数据（如 POST 请求）时，请求体中包含该数据。

4. 接收 HTTP 响应

源站收到 HTTP 请求后，它会处理请求并发送一个 HTTP 响应。HTTP 响应包含的信息包括：

• 响应状态代码： 指示请求是否成功（如 200 OK）或失败（如 404 Not Found）。
• 响应标头： 提供有关响应的其他信息，如内容类型、内容长度、缓存控制等。
• 响应体： 包含请求的网页内容，可以是 HTML、JSON、图片等。

5. 解析 HTML

如果 HTTP 响应包含 HTML 内容，计算机将对其进行解析。HTML（超文本置标语言）是一种 markup 语言，它使用一系列元素和 attribute 来构建网页的 structure 和内容。

HTML 解析器负责将 HTML 字符串解析成一个 DOM 树（文档对象 getModel），该树表示网页的层次 structure。DOM 树的根元素是 元素，它包含所有其他 HTML 元素，如 、、