浏览器如何加载网站

在上一篇文章中，我们介绍了构建网站所用的各类技术。本文将深入讲解这些技术（在万维网是如何工作的这一篇中提及）是如何被浏览器渲染出来的——当浏览器收到构成网页的代码文件和其他资源后，它们如何被组合成用户最终看到并与之交互的完整页面？

前提：	对你使用的操作系统、网页浏览器及基本 web 技术有初步了解。
学习成果：	了解 HTTP 响应中可能包含哪些类型的文件。理解浏览器如何将这些文件组合并渲染成用户可见的网页。认识浏览器作为开发环境的两面性：既充满挑战，又极具魅力。

HTTP 响应中通常包含哪些文件？

回顾上一篇介绍的现代网页技术，一个网页请求的 HTTP 响应中通常会包含以下一种或多种文件类型：

HTML 文件：定义网页的内容与结构。
CSS 文件：控制网页的样式与布局。
JavaScript 文件：实现网页的交互行为。
媒体资源：如图片、视频、音频、PDF 或 SVG，可直接嵌入页面或由浏览器展示。
其他类型文件：例如 Word 文档、PowerPoint 幻灯片、Open Office 文件等，浏览器无法直接处理，通常会调用系统中相应的应用程序打开。

网页渲染过程

当用户访问一个新网页（比如点击链接或输入网址）时，浏览器会发出多个 HTTP 请求，并接收到 HTTP 响应中的多个文件。浏览器会处理这些文件，将它们组合成一个可交互的网页。这个过程称为渲染。

下面我们从高层次来理解浏览器渲染网页的基本步骤。注意，不同浏览器的实现细节可能有所不同，但核心流程大致相似。

处理 HTML

浏览器首先收到 HTML 文件，并将其解析成一棵DOM 树（文档对象模型）。DOM 以树状结构在内存中表示整个 HTML 文档的层次关系。例如下面这段简单的 HTML：

html

<p>
  Let's use:
  <span>HTML</span>
  <span>CSS</span>
  <span>JavaScript</span>
</p>

每个标签、属性和文本都会成为树结构中的一个 DOM 节点。节点之间通过父子、兄弟关系相互关联。节点通过其与其他 DOM 节点的关系来定义。某些元素是子节点的父节点，而子节点之间存在兄弟节点关系。以上面的 HTML 为例，浏览器将解析此 HTML 并据此创建以下 DOM 树：

P
├─ "Let's use:"
├─ SPAN
|  └─ "HTML"
├─ SPAN
|  └─ "CSS"
└─ SPAN
    └─ "JavaScript"

在这棵 DOM 树中，<p> 元素对应的节点为父节点。其子节点包含一个文本节点和三个 <span> 元素对应的节点。而这些 SPAN 节点同样也是一些文本节点的父节点。浏览器渲染的 DOM 树大概长这样：

p {
  margin: 0;
}

在解析 HTML 过程中，如果遇到以下元素，浏览器会发起额外的 HTTP 请求来获取外部资源：

<link> 引用的外部 CSS 样式表。
<script> 引用的外部 JavaScript 文件。
<img>、<video>、<audio> 等用于引用希望嵌入网页的媒体文件的元素。

解析 CSS 并渲染页面

接下来，浏览器按照以下步骤处理 CSS：

解析所有页面中的 CSS（包括 HTML 自带以及外部引用的样式表），并根据应用的 HTML 元素将 CSS 的样式规则放入不同的“桶”（映射到 DOM 树中叫做节点），并按需将样式附加到对应的不同的元素中（这一中间步骤形成渲染树）。
在应用规则后呈现渲染树应当展现的结构。包括任何图像等将要嵌入网页的媒体文件。
将布局后的节点实际显示到屏幕上（这一步叫做绘制）。

整个过程可参考以下示意图：

渲染过程概览

回到我们的示例，假设在 HTML 文件中发现了以下 CSS 代码：

<p>
  Let's use:
  <span>HTML</span>
  <span>CSS</span>
  <span>JavaScript</span>
</p>

css

span {
  border: 1px solid black;
  background-color: lime;
}

CSS 中唯一一个规则是 span 选择器，所以浏览器可以很快的处理！浏览器会将这条规则应用到 DOM 树的三个 SPAN 节点，绘制出带黑色边框和柠檬绿背景的效果，最后将最终的视觉呈现绘制到屏幕上。

更新后的效果大概长这样：

处理 JavaScript

在处理完 CSS 之后，页面上发现的任何 JavaScript（无论是包含在 HTML 文件中，还是从外部脚本文件中获取的）都会被解析、解释、编译并执行。这发生在最终页面渲染完成之前某个时间点——毕竟某些 JavaScript 可能会影响渲染过程，例如向 DOM 添加节点或修改现有节点。

继续之前的例子，假设我们在 HTML 文件中找到了以下 JavaScript 代码：

<p>
  Let's use:
  <span>HTML</span>
  <span>CSS</span>
  <span>JavaScript</span>
</p>

span {
  border: 1px solid black;
  background-color: lime;
}

const spans = document.querySelectorAll("span");
spans.forEach((span) => {
  const reversedText = span.textContent.split("").reverse().join("");
  span.textContent = reversedText;
});

你无需精确理解这段 JavaScript 的工作原理，但从高层次来看，它会遍历 DOM 中的所有 SPAN 节点，并将它们子文本节点中的字符顺序进行反转。

最终输出如下：