广告位联系
返回顶部
分享到

详解JavaScript中的惰性载入函数及优势

JavaScript 来源:互联网搜集 作者:秩名 发布时间:2020-02-18 19:43:32 人浏览
摘要

定义 惰性载入函数表示函数执行的分支仅会发生一次,有两种实现惰性载入函数的方式,第一种是在函数被调用时再处理,在第一次调用中,该函数会覆盖为另外一个按合适方式执行的函数,这样任何对函数的调用都不用再经过执行的分支了。第二种实现惰性载入的方式

定义

惰性载入函数表示函数执行的分支仅会发生一次,有两种实现惰性载入函数的方式,第一种是在函数被调用时再处理,在第一次调用中,该函数会覆盖为另外一个按合适方式执行的函数,这样任何对函数的调用都不用再经过执行的分支了。第二种实现惰性载入的方式是在声明函数时就制定适当的函数,这样,第一次调用函数时就不会损失性能了,而在代码首次加载时会损失一点儿性能。

功能

由于现在浏览器之间的差异,为了实现跨浏览器工作,很多函数要书写大量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库在在加载的时候就根据浏览器不同而执行很多分支,把所有东西实现设置好,而惰性载入函数将计算延迟,不影响初始脚本的执行时间。


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/liuyifeng0000/article/details/104355311
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计