图3.8 单击按钮后的网页效果
前端网页的工作原理在成功构造一个简单的网页并运行后，接下来介绍前端网页的工作原理。
通过3.1.1小节和3.1.2小节的介绍我们知道，一个网页要运行起来，至少需要两步。第一步是搭建Web服务器，让浏览器能请求并得到网页资源文件；第二步是把网页资源文件放到网页服务器上。前端网页的工作原理也分为两部分介绍：一部分是浏览器加载网页资源，介绍浏览器与Web服务器的关系；另一部分是浏览器运行网页，介绍浏览器和网页的关系。
注意：本节默认以Chrome浏览器作为说明的对象。虽然不同浏览器运行网页的工作原理会有所区别，但是整体流程是基本相同的。本节在原理讲解上会省略很多细节，读者只需要大体了解即可。
1.浏览器加载网页资源
一个网站是由很多个网页组成的，每个网页都有自己的地址。以3.1.2小节中的网页为例，在浏览器的地址栏中输入网址（http://localhost/sample/abc.html）并按Enter键后，相当于向服务器发送了一个请求。这个请求包含多个部分，如图3.9所示，其中为了对网址有一个全面的解释，此处补充了端口部分和参数部分。
说明：类似于这样的网址或某个资源的网络地址，一般被称为URL（Uniform Resource Locator，统一资源定位符），后面将以URL代替对网址或网络地址的描述。
图3.9 网页地址的结构
协议（protocol）：请求网页资源的协议一般为HTTP或HTTPS。由于HTTPS具有更高的安全性，而且浏览器会对使用HTTP的网站提示“不安全”，所以现在一般使用HTTPS。如果使用HTTPS，则需要对Web服务器进行额外配置。不过，HTTPS只是在HTTP的基础上做了通信加密，这个加解密的过程是浏览器和Web服务器自动完成的，我们只需要配置好Web服务器即可，这对网站开发本身没有影响。
主机名（hostname）：这里可以是域名或者服务器的公网IP。如果是域名的话，那么在真正发送请求到网页服务器之前，域名解析服务器（DNS）会自动把域名转换成服务器的公网IP。域名解析服务器是公共资源（一般不能对其进行操作），在购买域名后，在购买域名的网站绑定域名和服务器的公网IP，即可自动同步信息到DNS。
端口（port）：一般使用默认端口。如果是默认端口，那么可以省略端口部分。HTTP的默认端口是80，HTTPS的默认端口是443。
协议 主机名 端口：有了这三部分，Web服务器就能收到用户发送的请求。Web服务器收到请求后，会继续对URL的后续部分进行解析。
路径（path）：Web服务器根据路径寻找资源，在如图3.9所示的例子中，Web服务器会根据/sample/abc.html这个路径找到abc.html网页文件并把文件内容发送给浏览器。不过，资源不一定都是文件，也可能是后端接口。但无论请求的资源是什么，Web服务器都会以字节流形式返回内容。
参数（parameters）：从“？”开始到最后都为参数部分，多个参数之间用“&”隔开。参数一般用在请求资源时，其处理不一定在服务器端进行，也可能由网页的JavaScript脚本处理。
说明：网址还可以添加信息片段部分，这部分一般是在整个网址的最末端以“#”开始，如http://localhost/sample/abc.html?id=123&type=1#home。信息片段部分只会被网页的JavaScript脚本处理，因此，如果只更新这部分，那么网页是不会被浏览器刷新的。
以上是对URL的介绍，下面我们回到浏览器加载网页资源的过程。服务器在接收到请求后返回网页文件，浏览器对网页文件进行解析，当发现网页文件中有其他需要下载的资源时（如代码3.7中的<linkrel="stylesheet"href="css_2.css">），会向Web服务器请求新的文件。以3.1.2小节中的网页为例，浏览器加载网页资源的全过程如图3.10所示。
图3.10 浏览器加载网页资源的全过程
注意：文件资源都以字节流的形式返回，浏览器每获取一部分内容就会立即对其进行处理，而不会等全部获取文件资源后再解析。资源请求的方式一般是异步请求，即不会等上一个请求的资源全部获取后再开始请求下一个网页资源。
对于如图3.10所示的请求过程，可以按F12键打开浏览器的开发工具查看具体的请求细节。以Chrome浏览器为例，其开发者工具如图3.11所示。
图3.11 使用开发者工具查看资源请求的细节
2.浏览器运行网页
浏览器显示网页的工作流程大概可以分成4部分，即构建DOM树、构建呈现树（render tree）、布局处理和绘制页面，如图3.12所示。因为浏览器对网页进行的是流式处理，所以此流程不是一次性完成的，而是每解析一部分网页，都可能会执行一次流程。
