客户端Web应用的两个生命周期阶段

雨点打透心脏的1/2处 2023-01-08 08:27 95阅读 0赞

**目录**

一、客户端Web应用发生了哪两个阶段？

二、页面构建阶段

三、事件处理阶段

生命周期预览

--------------------

# **一、****客户端Web应用发生了哪两个阶段****？** #

1.  页面构建阶段
2.  事件处理阶段

--------------------

# 二、页面构建阶段 #

*  两个步骤：1.解析html代码并构建文档对象模型(DOM)      2.执行JavaScript 代码
 *  所有包含在脚本元素中的JavaScript代码都由浏览器的JavaScript引擎执行，由于代码是主要目的是提供动态页面，故而浏览器通过全局对象window提供了API和window最重要的属性document，使JavaScript引擎可以与页面进行交互并改变页面内容。
 *  当页面构建遇到JavaScript代码会停止html到dom的构建，然后执行完JavaScript代码的最后一行，浏览器会退出JavaScript执行模式，并继续余下的html构建成dom节点。当再次遇到脚本元素，因为全局window对象会存在于整个页面的生命周期之间，在他上面存储着所有的JavaScript变量。所以只要还有没处理完的html元素和没执行完的JavaScript代码，那么两个步骤都会一直交替执行。

--------------------

##  ##

# 三、事件处理阶段 #

浏览器执行的环境的核心思想基于：同一个时刻只能执行一个代码片段，即所谓的单线程执行模型。因此浏览器用**队列**来跟踪已经发生但尚未处理的事件。

我们对事件的处理是异步的，如

*  浏览器事件，例如页面加载完后无法再加载
 *  网络事件，例如来自服务器的响应（ajax事件和服务端事件）
 *  用户事件，例如鼠标单击，鼠标移动等
 *  计时器事件，当timeout时间到期或又触发来一次事件间隔

为了要告诉浏览器我们要处理哪个事件，我们就需要注册事件处理器，事件处理器是当某个某个特定事件发生后我们希望执行的函数，我们可以通过两种方式注册事件处理器

*  通过把函数献给某个特殊属性

window.onload = function () {};
    document.body.onclick = function () {}

*  通过使用内置函数addEventListener方法

document.body.addEventListener("onclick",function () {})

**把函数赋值给特殊属性只能注册一个事件处理器，而**addEventListener方法可以注册多个。

--------------------

# 生命周期预览 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20221119/68c3cbe713b5441abb09f2417d0dd1c9.png