web应用的生命周期

从第4步开始页面的构建

页面构建

页面的构建过程，主要做两件事

• 解析HTML代码并构建文档对象模型（DOM）
• 执行JavaScript代码。

当浏览器在页面构建阶段遇到了脚本节点，就会停止HTML到DOM的构建，转而开始执行JavaScript代码，依次执行全局JS代码，若期间调用了函数，则执行JS 函数内的代码。

JS 代码执行结束后，将继续HTML到DOM的构建，直到再次遇到脚本节点。

这两件事不断交替，直到整个页面构建完毕，接着进入事件处理阶段。

事件处理

页面构建完成后，用户即可看到页面，并与页面进行交互，这些交互，都通过事件的形式跟踪和触发。

常见的事件有：

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

要想让页面对事件做出响应，需要先注册事件 —— 即告诉浏览器，在事件发生时，要执行哪些 JS 代码。

注册事件

• 方式一：【不推荐】 把函数赋给某个特殊属性

缺点：对于某个事件只能注册一个事件处理器

window.onload = function（）{};
document.body.onclick = function（）{};

• 方式二：使用内置addEventListener方法

优点：对于某个事件可以注册多个事件处理器

   document.body.addEventListener（"mousemove", function（） {    ←---  为mousemove事件注册处理器
      var second = document.getElementById（"second"）;
      addMessage（second, "Event: mousemove"）;
   }）;

   document.body.addEventListener（"click", function（）{    ←---  为click事件注册处理器
      var second = document.getElementById（"second"）;
      addMessage（second, "Event: click"）;
   }）;

事件轮询

因为 JS 是单线程执行，所以事件会排成一个队列，通过事件轮询机制，一个个执行（先进先出），图示如下：

处理事件

核心思想：当事件发生时，浏览器调用相应的事件处理器。