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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
js opener的使用详解
Jan 11 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 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
PHP文本数据库的搜索方法
2006/10/09 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
为什么称python为胶水语言
2020/06/16 Python
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
医学生实习自荐信
2013/10/01 职场文书
总经理岗位职责范本
2014/02/02 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
会计人员演讲稿
2014/09/11 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
校园广播站开场白
2015/06/01 职场文书
邹越演讲观后感
2015/06/15 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python