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 URL参数读取改进版
Jan 16 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 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开发GUI
2006/10/09 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
JQuery球队选择实例
2015/05/18 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python argv用法详解
2016/01/08 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python reduce函数作用及实例解析
2020/05/08 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
浙江文明网签名寄语
2014/01/18 职场文书
黄金酒广告词
2014/03/21 职场文书
活动总结书
2014/05/08 职场文书
食堂标语大全
2014/06/11 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
2016猴年春节问候语
2015/11/11 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
vue中 this.$set的使用详解
2021/11/17 Vue.js