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 url传值中文乱码之解决之道
Nov 20 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
Js的Array数组对象详解
Feb 22 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
JavaScript的console命令使用实例
Dec 03 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
js中传递特殊字符(+,&)的方法
2014/01/16 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
jQuery中:first选择器用法实例
2014/12/30 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
Python 正则表达式操作指南
2009/05/04 Python
python3大文件解压和基本操作
2017/12/15 Python
python实现银行管理系统
2019/10/25 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
教师实习自我鉴定
2013/12/14 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
画展邀请函
2015/01/31 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
Java获取字符串编码格式实现思路
2022/09/23 Java/Android