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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
js生成随机数的方法实例
Oct 16 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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多层数组与对象的转换实例代码
2013/08/05 PHP
php中异常处理方法小结
2015/01/09 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
理解Javascript_13_执行模型详解
2010/10/20 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
django admin组件使用方法详解
2019/07/19 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
自我鉴定三原则
2014/01/13 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
护校行动方案
2014/05/31 职场文书
参加招聘会后的感想
2015/08/10 职场文书
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python