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实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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对象Object的概念 介绍
2012/06/14 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
讲解Python中的标识运算符
2015/05/14 Python
Python实现带百分比的进度条
2016/06/28 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
python读取Kafka实例
2019/12/23 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
python画环形图的方法
2020/03/25 Python
keras topN显示,自编写代码案例
2020/07/03 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
Python中的流程控制详解
2021/02/18 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
日语专业推荐信
2013/11/12 职场文书
民事授权委托书范文
2014/08/02 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python