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 相关文章推荐
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
js简单抽奖代码
Jan 16 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
动态统计当前输入内容的字节、字符数的实例详解
Oct 27 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
React 组件间的通信示例
Jun 14 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 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中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP连接access数据库
2015/03/27 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
2011/11/21 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
前端路由&webpack基础配置详解
2019/06/10 Javascript
浅谈Vue项目骨架屏注入实践
2019/08/05 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python retrying模块的使用方法详解
2019/09/25 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python中time、datetime模块的使用
2020/12/14 Python
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
中学生期末评语
2014/02/03 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
升国旗演讲稿
2014/09/05 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2015年小学教科研工作总结
2015/07/20 职场文书
2016猴年春节问候语
2015/11/11 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
Python如何加载模型并查看网络
2022/07/15 Python