3.1　页面呈现

Web浏览器中负责将网页的HTML转换为在屏幕上可以看到的交互式视觉效果的软件组件称为渲染管道。渲染管道负责解析页面的HTML，理解文档的结构和内容，并将其转换为操作系统可以理解的一系列绘图操作。

对于互联网初期的网站，实现这个过程相对简单。网页HTML几乎没有样式信息（例如颜色、字体和字号），因此渲染主要是加载文本和图像，并按照它们在HTML文档中出现的顺序在屏幕上绘制它们。HTML被设想为一种标记语言，这意味着它通过将网页分解为语义元素并注释信息的结构来描述网页。早期的网站看起来很粗糙，但是对于传输文本内容非常有效。

如今，网页设计得越来越精致，视觉上也越来越吸引人。Web开发人员将样式信息编码到单独的层叠样式表（CSS）文件中，这些文件精确地指示浏览器如何显示每个页面元素。像Google Chrome这样的现代、高度优化的浏览器包含数百万行代码，可以正确地解释和呈现HTML，并以快速、统一的方式处理冲突的样式规则。了解组成渲染管道的各个阶段将有助于你理解这种复杂性。

3.1.1　渲染管道：概述

稍后我们将详细介绍渲染过程的每个阶段，但首先让我们看一下高阶过程。

当浏览器收到HTTP响应时，它将响应正文中的HTML解析为文档对象模型（DOM）：一种内存中的数据结构，表示浏览器对页面构成方式的理解。生成DOM是解析HTML和在屏幕上绘制页面之间的过渡步骤。在现代HTML中，在解析整个HTML之前，无法确定页面的布局，因为HTML中标签的顺序并不一定确定其内容的位置。

浏览器生成DOM之后，但在屏幕上绘制任何内容之前，必须将样式规则应用于每个DOM元素。这些样式规则声明如何绘制每个页面元素——前景色和背景色、字体样式和大小、位置和对齐方式等。最后，在浏览器确定页面的结构并确定如何应用样式信息之后，它将在屏幕上绘制网页。所有这些操作都在不到一秒钟的时间内完成，并在用户与页面交互时在循环中重复进行。

浏览器还会在构建DOM时加载并执行遇到的所有JavaScript。JavaScript代码可以在呈现页面之前或响应用户动作来动态地更改DOM和样式规则。现在，让我们详细了解每个步骤。

3.1.2　文档对象模型

当浏览器第一次收到包含HTML的HTTP响应时，它将HTML文档解析为DOM。DOM是一种将HTML文档描述为一系列嵌套元素（称为DOM节点）的数据结构。DOM中的某些节点对应于要在屏幕上呈现的元素，例如输入框和文本段落，还有其他节点，例如控制页面行为和布局的脚本和样式元素。

每个DOM节点大致相当于原始HTML文档中的一个标签。DOM节点可以包含文本内容，也可以包含其他DOM节点，类似于HTML标签相互嵌套的方式。因为每个节点可以以分支方式包含其他节点，所以Web开发人员会经常谈论DOM树。

某些HTML标签，例如<script>、<style>、<image>、<font>和<video>，可以在属性中引用外部URL。将这些标签解析为DOM后，它们会导致浏览器导入外部资源，这意味着浏览器必须发起另一个HTTP请求。现代浏览器会在页面渲染的同时执行这些请求，以缩短页面加载时间。

从HTML构造DOM的目的是尽可能地保持健壮。浏览器接受HTML格式错误，它们关闭未关闭的标签，插入丢失的标签，并根据需要忽略损坏的标签。浏览器厂商不会因网站错误而责怪网站用户。

3.1.3　样式信息

一旦浏览器构建了DOM树，它就需要确定哪些DOM节点对应于屏幕上的元素，如何相对地布置这些元素，以及要应用什么样式信息。尽管可以在HTML文档中内联定义这些样式规则，但是Web开发人员更喜欢在单独的CSS文件中编码样式信息。将样式信息与HTML内容分开，可以更轻松地重新样式化现有内容，并保持HTML内容尽可能干净。它还使HTML更易于解析，以供屏幕阅读器等其他浏览技术使用。

使用CSS时，Web开发人员将创建一个或多个样式表，以声明应如何呈现页面上的元素。HTML文档将通过使用<style>标签来引用这些样式表，该标签引用托管样式表的外部URL。每个样式表都包含选择器，这些选择器挑选HTML文档中的标签，并为每个选择器分配样式信息，例如字体大小、颜色和位置。选择器可能很简单，例如，它们可能声明<h1>标签中的标题文本应显示为蓝色。对于更复杂的网页，选择器变得更加复杂：选择器可以描述用户将鼠标移到其上时超链接改变颜色的速度。

渲染管道实现了很多逻辑来呈现最终样式，因为需要遵循严格的优先级规则来确定样式的应用方式。每个选择器可以应用于多个页面元素，并且每个页面元素通常都会具有由多个选择器提供的样式信息。早期互联网的一个成长烦恼是如何创建一个在不同类型浏览器中呈现时看起来相同的网站。现代浏览器在呈现网页的方式上通常是一致的，但它们仍然各不相同。符合Web标准的行业基准是Acid3，如图3-1所示。只有少数浏览器获得100分。你可以访问http://acid3.acidtests.org/去做Acid3测试。

DOM树的构造和样式规则的应用与Web页面中包含的任何JavaScript代码的处理并行进行。这个JavaScript代码甚至在呈现页面之前就可以改变页面的结构和布局，所以让我们快速看一看JavaScript的执行如何与呈现管道相吻合。