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判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
纯js实现画一棵树的示例
Sep 05 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
ES6箭头函数和扩展实例分析
May 23 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
python查看zip包中文件及大小的方法
2015/07/09 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python next()和iter()函数原理解析
2020/02/07 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
临床医学大学生求职信
2013/09/28 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
详解pytorch创建tensor函数
2022/03/22 Python