JavaScript中的惰性载入函数及优势


Posted in Javascript onFebruary 18, 2020

定义

惰性载入函数表示函数执行的分支仅会发生一次,有两种实现惰性载入函数的方式,第一种是在函数被调用时再处理,在第一次调用中,该函数会覆盖为另外一个按合适方式执行的函数,这样任何对函数的调用都不用再经过执行的分支了。第二种实现惰性载入的方式是在声明函数时就制定适当的函数,这样,第一次调用函数时就不会损失性能了,而在代码首次加载时会损失一点儿性能。

功能

由于现在浏览器之间的差异,为了实现跨浏览器工作,很多函数要书写大量if语句或者try…catch…语句。当每次调用函数时,都要对每个if分支或try语句进行检查,这样会使得浏览器反应变慢。实际上,当我们用某个浏览器打开网页时,就决定了某个if分支或try语句是可用的,没有必要每次调用都检查。为了解决以上问题,JavaScript中出现一种名为惰性载入的技巧。

示例

载入方式一

var flag = 1;
function test1() { 
if(typeof flag === 'undefined') { 
test1 = function() {  
return 0; 
} 
} else if(flag === 1) { 
test1 = function() {  
return 1; 
} 
} else { 
test1 = function () {  
return -1; 
} 
} 
return test1();
}

这里if语句的每个分支都会为test1变量赋值,有效覆盖了原有的函数,最后一步便是调用新赋的函数,下一次调用test1()的时候就会直接调用被分配的函数,就不会再走if语句了,这样就可以提高性能。

载入方式二

var flag = 1;
var test2 = (function() { 
if(typeof flag === 'undefined') { 
return function() {  
return 0; 
} 
} else if(flag === 1) { 
 return function () {  
 return 1; 
 } 
 } else { 
 return function () {  
 return -1; 
 } 
 }
 })();

不同点是使用了立即执行函数,通过var来定义函数,在每个if分支中return一个函数。

优势

惰性载入函数有两个主要优点,第一是显而易见的效率问题,虽然在第一次执行的时候函数会意味赋值而执行的慢一些,但是后续的调用会因为避免的重复检测更快;第二个是要执行的适当代码只有当实际调用函数是才执行,很多JavaScript库在在加载的时候就根据浏览器不同而执行很多分支,把所有东西实现设置好,而惰性载入函数将计算延迟,不影响初始脚本的执行时间。

总结

以上所述是小编给大家介绍的JavaScript中的惰性载入函数及优势,希望对大家有所帮助,也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
Nuxt的路由动画效果案例
Nov 06 Javascript
jquery实现垂直手风琴导航栏
Feb 18 #jQuery
vue微信分享插件使用方法详解
Feb 18 #Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 #jQuery
vue+ts下对axios的封装实现
Feb 18 #Javascript
ES6中Promise的使用方法实例总结
Feb 18 #Javascript
React中获取数据的3种方法及优缺点
Feb 18 #Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 #Javascript
You might like
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
vant实现购物车功能
2020/06/29 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
Python 装饰器深入理解
2017/03/16 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
公司联欢会策划方案
2014/05/19 职场文书
社会公德演讲稿
2014/05/20 职场文书
基层党员公开承诺书
2014/05/29 职场文书
计生工作先进事迹
2014/08/15 职场文书
公司董事任命书
2015/09/21 职场文书
校园安全教育心得体会
2016/01/15 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
八年级历史教学反思
2016/02/19 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
vue实现锚点定位功能
2021/06/29 Vue.js