第二章 运行时的页面构建过程

 

一、客户端 Web 应用的生命周期

客户端 Web 应用的生命周期从用户指定某个网站地址（或单击某个连接）开始

其由两个步骤组成：页面构建和事件处理

　　页面构建 —— 建立用户界面

　　事件处理 —— 进入循环（序号5）从而等待事件（序号6）的发生，发生后调用事件处理器

 

 

二、页面构建阶段

页面构建阶段从浏览器接收页面代码开始

其执行分为两个步骤：

　　(1)、解析 HTML 代码并构建文档对象模型（DOM）

　　(2)、执行 Javascript 代码

步骤 1 会在浏览器处理 HTML 节点的过程当中执行

步骤 2 会在 HTML 解析到一种特殊节点 —— 脚本节点时执行

页面构建阶段中这两个步骤会交替执行屡次

 

 

 

三、在页面构建阶段执行 JavaScript 代码

当浏览器在页面构建阶段遇到了脚本节点，它会中止 HTML 到 DOM 的构建，转而开始执行 JavaScript 代码

这个例子中，JavaScript 经过建立一个新元素并将其插入 DOM 节点修改了当前的 DOM 结构

通常来讲，JavaScript 代码可以在任何程度上修改 DOM 结构：它能建立新的节点或移除现有 DOM 节点

但它依然不能作某些事情，例如选择和修改尚未被建立的节点

这就是为何要把 script 元素放在页面底部的缘由。如此一来，咱们就没必要担忧是否某个 HTML 元素已经加载为 DOM

 

关于下划线：

　　浏览器接收的 HTML 代码用做建立 DOM 的蓝图，咱们使用 Javascript 代码来动态地修改 DOM 以便给 Web 应用带来动态行为。

 

四、事件处理

客户端 Web 应用是一种 GUI 应用，也就是说这种应用会对不一样类型的事件做响应，如鼠标移动，单击和键盘按压等。

所以，在页面构建阶段执行的 JavaScript 代码，除了会影响全局应用状态和修改 DOM 外，还会注册事件监听器（或处理器）。这类监听器会在事件发生时，由浏览器调用执行。

有了这些事件处理器，咱们的应用也就有了交互能力。

 

五、处理事件

在事件处理阶段中，事件循环会检查队列，其发现队列的前面有一个鼠标移动事件，而后执行了相应的事件处理器序号2。

当鼠标移动事件处理器处理完毕后，轮到了等待在队列中的单击事件。

当鼠标移动事件处理器函数的最后一行代码执行完毕后，JavaScript引擎退出事件处理器函数，鼠标移动事件完整地处理了序号3，事件循环再次检查队列

这一次，在队列的最前面，事件循环发现了鼠标单击事件并处理了该事件，一旦单击处理器执行完成，队列中再也不有新的事件，事件循环就会继续循环，等待处理新到来的事件。这个循环会一直执行到用户关闭了 Web 应用。

 

 

 

重点注意浏览器在这个过程当中的机制，其放置事件的队列是在页面构建阶段和事件处理阶段之外的。这个过程对于决定事件什么时候发生并将其推入事件队列很重要，这个过程不会参与事件处理线程。

 

 

图片来自：JavaScript忍者秘籍（第2版）