2-运行时的页面构建过程

前言

• 本系列是本身javascript忍者秘籍第2版读书笔记
• 初次写文章,记录下本身的足迹。还但愿各位大佬多多包容。
• 这个读书笔记是本身github上,夯实前端基础项目的一个分支。
• 连接：Front-end-Advancement

本章包括如下内容:

• Web应用的生命周期步骤
• 从HTML代码到Web页面的处理过程
• javaScript代码的执行顺序
• 与事件交互
• 事件循环

生命周期概览

页面构建阶段

• 当Web应用能被展现或交互以前,其页面必须根据服务器获取的响应(一般是HTML,CSS和 javascript代码)来构建。页面构建的目标是创建Web应用的UI

1. 解析html代码并构建文档对象模型(dom)
2. 执行javascript代码

• 页面构建阶段中,这两个步骤会交替执行屡次。

HTML解析和DOM构建

• 尽管dom是根据HTML来建立的,二者紧密联系,可是须要强调的是,它们二者并不相同。你能够把HTML代码看做浏览器页面UI构建初始化DOM的蓝图。为了正确构建每一个DOM,浏览器还会修复它在蓝图中发现的问题。

执行javascript代码

• 每当解析到脚本元素时,浏览器就会中止从html构建dom,并开始执行JavaScript代码。

• javascript代码由浏览器的javascript引擎执行。

• 因为代码的主要目的是提供动态页面,故而浏览器经过全局对象提供了一个API 使javascript引擎能够与之交互并改变页面内容。

1. JavaScript中的全局对象 window

• window.document 表明了当前页面的dom。经过使用这个对象,JavaScript代码就能在任何程度上改变DOM,包括修改或移除现存的节点,以及建立和插入新的节点。

2. JavaScript代码的不一样类型

• 全局代码 全局代码指的是位于函数以外
• 函数代码 函数代码指的是包含在函数中的代码

3. 在页面构建阶段执行JavaScript代码

• 一旦JavaScript引擎执行到了脚本元素中javascript代码的最后一行,浏览器就退出了javascript执行模式,并继续余下的html构建为dom节点。在这期间,若是浏览器再次遇到脚本元素,那么从html到dom的构建再次暂停,JavaScript运行环境开始余下的javascript代码。须要重点注意：javascript应用在此时依然会保持着全局状态。全部在某个javascript代码执行期间用户建立的全局变量都能正常的被其余脚本元素中JavaScript代码所访问到。其缘由在于全局window对象会存在于整个页面的生存期之间,在它上面存储着的全部的javascript变量。只要尚未处理完的html元素和没执行完的javascript代码,下面两个步骤都会一直交替执行。

1. 将Hmtl构建为dom
2. 执行JavaScript代码

• 变量都保存在window上 (同名函数会覆盖同名变量)

  

事件处理

事件处理器概览

• 浏览器执行环境的核心思想基于:同一时刻只能执行一个代码片断,即所谓的单线程执行模型。
• 浏览器须要一种方式来跟踪已经发生但还没有处理的事件。为了实现这个目标,浏览器使用了事件队列。

1. 事件是异步的

• 浏览器事件，例如当页面加载完成后或没法加载时；
• 网络事件，例如来自服务器的响应（Ajax事件和服务器端事件）；
• 用户事件，例如鼠标单击、鼠标移动和键盘事件；
• 计时器事件，当timeout时间到期或又触发了一次时间间隔。
• Web应用的JavaScript代码中，大部份内容都是对上述事件的处理！
• 事件处理的概念是Web应用的核心。代码的提早创建时为了在以后的某个时间点执行。除了全局代码,页面中的大部分代码都将做为某个事件的结果执行。

注册事件处理器

• 在客户端Web应用中,有两种方式注册事件。

1. 经过把函数赋值给某个特殊属性
2. 经过使用内置 addEventListener方法

// onload事件上 当 dom已经就绪并所有构建完成,就会触发这个事件
// 缺点 对于某个事件只能注册一个事件处理器
window.onload = function () {}


document.body.addEventListener('mousemove',function(){})

document.body.addEventListener('click',function(){})

复制代码

处理事件

• 事件处理背后的主要思想是:当事件发生时,浏览器调用相应的事件处理器。
• 因为单线程执行模型,因此同一时刻只能处理一个事件。
• 任何后面的事件都只能在当前事件处理器彻底执行后才能被处理。

小结

1. 浏览器接收的HTML代码用做建立DOM的蓝图,它是客户端Web应用结构的内部展现阶段
2. 咱们使用JavaScript代码来动态地修改DOM以便给Web应用带来动态行为
3. 客户端Web应用的执行分为两个阶段

• 页面构建代码是用于建立DOM的,而全局javascript代码是遇到script节点时执行的。在这个执行过程当中javascript代码是可以以任意程度改变当前的dom,还可以注册事件处理器————事件处理器是一种函数,当某个特定事件发生后会被执行。注册事件处理器很容易:使用内置的 addEventListener方法。
• 事件处理————在同一时刻,只能处理多个不一样事件中的一个,处理顺序是事件生产的顺序。事件处理阶段大量依赖事件队列,全部的事件都以其出现的顺序存储在事件队列中。事件循环会检查事件队列的对头,若是检测到了一个事件,那么相应的事件处理器就会被调用。