运行时的页面构建过程

前言

探索客户端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则只开启了一个营业柜台！每当轮到某个顾客时（某个事件），只能处理该位顾客。

注册事件处理器

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)
}）;

// 都会依次执行