乐趣区

关于javascript:运行时的页面构建过程

jiezi

前言

摸索客户端 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)
}）;

// 都会顺次执行
退出移动版