javascript的生命周期

我们通常定义的客户端生命周期起始于浏览器开始装载某个请求的特定数据，结束于浏览器发起一个新的请求（通常意味着页面的跳转或刷新）。客户端的javascript则作用于这个完整的生命周期过程中。

如果进一步细分，我们可以将客户端生命周期划分为从页面数据被装载到页面数据装载完毕的初始化阶段以及页面数据装载完毕一直到新的请求被发起之前的运行阶段。在前一个阶段里，javascript代码被浏览器解析，运行环境被初始化，函数和闭包被建立，而那些可以被立即执行的指令被执行并实时地得到结果。在后一阶段里，完成初始化的程序环境进入一个缺省的等待消息的循环，捕获用户操作引发的事件并作出正确响应，这种模式同经典的事件驱动模型非常接近。在这一阶段里，javascrip代码真正扮演一个界面交互行为处理者的角色。

很显然，被臃肿页面修饰的javascrip代码通常在初始化阶段被执行完毕，而负责用户交互的javascript几乎总是要在运行阶段被触发和执行。区分这两者的作用和执行规律，有助于分解问题，优化我们的系统设计。

两者比较，看起来略显繁琐的第二个示例是一种更加安全的方式，在这种方式中，指令不会对装载期的文档内容产生影响，脚本指令被注册到body的onload事件中执行，这样确保了在执行前所有的文档元素都已经正确初始化完毕。

假如出现某种意外导致程序终止，第一个示例可能因此而导致文档数据不能加载完全，而后者则不会有这样的风险。

一个比较好的习惯是把除声明之外的所有脚本指令都放到运行阶段来执行，这样避免了因为初始化期间的DOM元素加载失败或者低级的次序问题而导致脚本失效。

javascript的生命周期相关推荐

【基础篇1】JavaScript页面生命周期
各位看官老爷,是否在框架横行的时代,忽略了原生js的方法.今天给大家带来一期html页面生命周期的分享. 页面生命周期方法 HTML 页面的生命周期包含四个重要事件: 事件说明应用场景 DOMCo ...
前端学习（1720）：前端系列javascript之生命周期下
page2.vue <template><view>这是page2<button type="primary" @click="open&q ...
前端学习（1718）：前端系列javascript之生命周期上
<script>export default {onLaunch: function() {console.log('App Launch')//登录//用户信息//存储},onShow: ...
JavaScript 生命周期
一.JavaScript有生命周期吗? 转自:http://blog.sina.com.cn/s/blog_694c144f0101pida.html 从页面数据被装载到页面数据装载完毕的初始化阶段: ...
javascript函数的生命周期
javascript函数的生命周期 var a = 10; function fun(){var a=100;a++;console.log(a); } fun(); console.log(a); ...
JavaScript 变量的作用域和生命周期
代码有生命吗?答案是有.它也像我们一样,拥有自己的生命.变量有局部变量和全局变量,它们的生命长短不一样.不过它的生命都是从它被声明的时候开始的,不同的是局部变量会在函数运行以后被删除,也就是死亡,而 ...
Vue 生命周期记录_学习笔记
官方给出的设计图入戏为了能更好的理解这个图呢,写了下面的demo <!DOCTYPE html> <html><head><meta charset=&qu ...
React 组件生命周期
组件的生命周期可分成三个状态: Mounting:已插入真实 DOM Updating:正在被重新渲染 Unmounting:已移出真实 DOM 生命周期的方法有: componentWillMoun ...
React State和生命周期 3
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 一:组件的生命周期组件的生命周期可分成三个状态: 安装:已插入真实DOM 更新:正在被重新渲染卸载:已移出 ...
alert 返回页面刷新_详解 HTML 页面原生的生命周期事件
DOMContentLoaded,load,beforeunload,unload HTML 页面的生命周期包含三个重要事件: DOMContentLoaded -- 浏览器已完全加载 HTML,并构 ...

javascript的生命周期

javascript的生命周期相关推荐

最新文章

热门文章