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

目录

• 1. Web应用的生命周期
• 2. 页面构建阶段
• 3. 事件处理阶段

1. Web应用的生命周期

1. 用户输入URL（或者单击链接） --> 生命周期开始
2. 浏览器生成请求并发送到服务器
3. 服务器执行某些动作或者获取某些资源；将响应发回客户端
4. 浏览器处理HTML、CSS和JavaScript并构建结果页面
5. 浏览器监控事件队列，一次处理其中一个事件
6. 用户与页面元素交互
7. 用户关闭Web页面 --> 生命周期结束

客户端Web应用的执行分为两个阶段：页面构建阶段、事件处理阶段

2. 页面构建阶段

• 前提：获取服务器的响应（通常为HTML、CSS和JavaScript代码）
• 目标：建立Web应用的UI
• 步骤：
  1. 解析HTML代码并构建文档对象模型（DOM）
  2. 执行JavaScript代码

注意： 步骤1会在浏览器处理HTML节点的过程中执行，步骤2会在HTML解析到脚本节点（包含或引用JavaScript代码的节点）时执行。两个步骤会交替多次执行。

3. 事件处理阶段

• 事件类型：
  • 浏览器事件：如页面加载完成后或无法加载时
  • 网络事件：如Ajax事件和服务器端事件
  • 用户事件：如单击或键盘事件
  • 计时器事件：当timeout事件到期或又触发了一次时间间隔
• 注册事件的方式：
  1. 把函数赋值给某个特殊属性

  window.onload = function(){};
  document.body.onclick = function(){};
  // 不推荐。缺点：对于某个事件只能注册一个事件处理器，重新赋值会覆盖前者
  

  2. 使用内置的addEventListener方法

  document.body.addEventListener("click", function(){});
  document.body.addEventListener("click", function(){});
  // 可以同时注册多个事件处理器，处理器同时触发，不会覆盖
  

• 处理事件：
  • 基于一个单线程的执行模型，一次只能处理一个事件
  • 事件处理的顺序与它们生成的顺序一致：先进先出