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 显示当前日期与时间的代码
Mar 24 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
JavaScript小技巧整理
Dec 30 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php获取系统变量方法小结
2015/05/29 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
javaScript对象和属性的创建方法
2007/01/15 Javascript
javascript第一课
2007/02/27 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
windows及linux环境下永久修改pip镜像源的方法
2016/11/28 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
师生聚会感言
2014/01/26 职场文书
市场营销毕业求职信
2014/08/07 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
React四级菜单的实现
2022/04/08 Javascript