web应用的生命周期

web应用的生命周期_第1张图片
从第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 是单线程执行,所以事件会排成一个队列,通过事件轮询机制,一个个执行(先进先出),图示如下:
web应用的生命周期_第2张图片

处理事件

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

你可能感兴趣的