运行时的页面构建过程

前言

探索客户端Web应用程序的生命周期,从页面请求开始,到用户不同种类的交互,最后至页面被关闭。

生命周期

客户端web应用的生命周期,从用户在浏览器地址输入一串URL,或点击一个链接开始。
  • 输入URL
  • 浏览器:浏览器构建了发送至服务器的请求
  • 服务器:处理请求,并形成一个通常由HTML、CSS、JavaScript代码组成的响应。
  • 浏览器:接收到响应时,处理HTML、CSS、JavaScript并构建结果页面
  • 事件处理:监控事件队列,一次处理其中的一个事件
  • 事件等待:与页面元素交互,发生后调用事件处理器。
  • 应用的生命周期随着用户关掉或者离开页面而结束。

页面构建阶段

页面构建阶段的目标是建立Web应用的UI,其主要包括两个步骤:

  1. 解析HTML代码并构建文档对象模型 (DOM);
  2. 执行JavaScript代码。
步骤1会在浏览器处理HTML节点的过程中执行;
步骤二会在HTML解析到一种特殊节点——脚本节点(包含或引用JavaScript代码的节点)时执行。页面构建阶段中,这两个步骤会交替执行多次

HTML解析和DOM构建

页面构建阶段始于浏览器接收HTML代码时,该阶段为浏览器构建页面UI的基础。
通过解析收到的HTML代码,构建一个个HTML元素,构建DOM。在这种对HTML结构化表示的形式中,每个HTML元素都被当作一个节点。

在页面构建阶段,浏览器会遇到特殊类型的HTML元素——脚本元素,该元素用于包括JavaScript代码。每当解析到脚本元素时,浏览器就会停止从HTML构建DOM,并开始执行JavaScript代码。

执行JavaScript代码

所有包含在脚本元素中的JavaScript代码由浏览器的JavaScript引擎执行
由于代码的主要目的是提供动态页面,故而浏览器通过全局对象提供了一个API 使JavaScript引擎可以与之交互并改变页面内容。

JavaScript中的全局对象

浏览器暴露给JavaScript 引擎的主要全局对象是window对象,它代表了包含着一个页面的窗口。
window对象是获取所有其他全局对象、全局变量(甚至包含用户定义对象)和浏览器API的访问途径。
全局window对象最重要的属性是document,它代表了当前页面的DOM。通过使用这个对象,JavaScript代码就能在任何程度上改变DOM,包括修改或移除现存的节点,以及创建和插入新的节点。

事件处理器概览

浏览器执行环境的核心思想基于:同一时刻只能执行一个代码片段,即所谓的单线程执行模型。想象一下在银行柜台前排队,每个人进入一支队伍等待叫号并“处理”。但JavaScript则只开启了一个营业柜台!每当轮到某个顾客时(某个事件),只能处理该位顾客。
image

注册事件处理器

window.onload = function(){};
通过这种方式,事件处理器就会注册到load事件上(当DOM已经就绪并全部构建完成,就会触发这个事件)。
document.body.onclick = function(){};

把函数赋值给特殊属性是一种简单而直接的注册事件处理器方式。但是,我们并不推荐你使用这种方式来注册事件处理器,这是因为这种做法会带来缺点:对于某个事件只能注册一个事件处理器。也就是说,一不小心就会将上一个事件处理器改写掉。幸运的是,还有一种替代方案:addEventListener方法让我们能够注册尽可能多的事件,只要我们需要。

document.body.addEventListener("click", function() { 
    console.log(1)
});

document.body.addEventListener("click", function() { 
    console.log(2)
});

// 都会依次执行

你可能感兴趣的