客户端Web应用程序的生命周期详解

客户端Web应用程序的生命周期

生命周期的开始

1. 用户输入URL（或者单击链接）
2. 浏览器生成请求发送至服务器
3. 服务器处理了请求，并返回一个响应。这个响应通常是由HTML CSS JavaScript代码所组成
4. 浏览器接收响应，我们的客户端应用开始了它的生命周期

生命周期的执行

第一阶段：页面的构建

这一阶段的目标是建立Web应用的UI，也就是形成一个用户看到的界面。其分为两个交替执行的步骤：

1. 解析HTML代码并构建文档对象模型（DOM）；
   通过解析收到的HTML代码，构建一个个HTML元素从而构建DOM,每个HTML元素都会被都会被当作一个节点。
2. 执行JavaScript代码
   当HTML解析到脚本元素时，浏览器会停止从HTML构建DOM，并由浏览器的JavaScript引擎（如chrome的V8引擎）开始执行JavaScript代码。

浏览器通过全局对象提供了一个API，JavaScript引擎通过这个API可以操作DOM节点从而改变页面内容。这个全局对象主要就是window对象，它代表了整个页面窗口。window中的document属性代表着当前页面的DOM

这里提一句，你可能会有个疑问：那么还没有被解析的DOM节点能被JavaScript引擎操作吗？答案肯定是不能的，这就是为什么要把script标签放在底部的原因。

只要还有没处理完的HTML元素和没执行完的JavaScript代码，上面两个步骤都会一直交替执行。

最后，当浏览器处理完所有HTML元素后，页面构建阶段就结束了。随后浏览器就会进入应用生命周期的第二部分：事件处理。

第二阶段：事件处理

在执行JavaScript代码时，除了会影响全局应用状态和修改DOM外，还会注册事件监听器（或事件处理器）。当事件发生时，浏览器会调用并执行这些事件处理器。而这些尚未发生的事件都会被排放在同一事件队列中

事件循环会检查事件队列，过程如下：

• 浏览器检查事件队列头；
• 如果浏览器没有在队列中检测到事件，则继续检查；
• 如果浏览器在队列头中检测到了事件，则取出该事件并执行相应的事件处理器。在这个过程中，余下的事件在事件队列中耐心等待，直到轮到它们被处理。

最后用户关闭窗口，生命周期结束