02.运行时的页面构建过程

Web 应用的生命周期步骤
从 HTML 代码到 Web 页面的处理过程
JavaScript 代码的执行顺序
与事件交互
事件循环

生命周期概览

典型客户端 Web 应用的生命周期从用户在浏览器地址栏输入一串 URL，或单击一个链接开始。其过程如下：

页面构建——创建用户界面;
事件处理——进入循环从而等待事件的发生，发生后调用事件处理器。
应用的生命周期随着用户关掉或离开页面而结束。

页面构建阶段

解析 HTML 代码并构建文档对象模型 (DOM);
执行 JavaScript 代码。

事件处理

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

事件是异步的

浏览器事件，例如当页面加载完成后或无法加载时;
网络事件，例如来自服务器的响应(Ajax 事件和服务器端事件);
用户事件，例如鼠标单击、鼠标移动和键盘事件;
计时器事件，当 timeout 时间到期或又触发了一次时间间隔。

小结

浏览器接收的 HTML 代码用作创建 DOM 的蓝图，它是客户端 Web 应用结构的内部展示阶段。
我们使用 JavaScript 代码来动态地修改 DOM 以便给 Web 应用带来动态行为。
客户端 Web 应用的执行分为两个阶段。
- 页面构建：用于创建DOM的，而全局JavaScript代码是遇到script节点时执行的。
- 事件处理：在同一时刻，只能处理多个不同事件中的一个，处理顺序是事件生成的顺序。事件处理阶段大量依赖事件队列，所有的事件都以其出现的顺序存储在事件队列中。