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 相关文章推荐
面向对象设计模式的核心法则
Nov 10 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
微信小程序实现底部弹出模态框
Nov 18 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
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
试用php中oci8扩展
2015/06/18 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
php链式操作的实现方式分析
2019/08/12 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
会计核算科岗位职责
2014/03/19 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
试用期辞职信范文
2015/03/02 职场文书