js优化之惰性加载函数

最新推荐文章于 2024-03-17 23:17:34 发布

lvqingyao520

最新推荐文章于 2024-03-17 23:17:34 发布

阅读量483

点赞数

分类专栏：学习篇总结篇文章标签：函数优化 javascript

本文链接：https://blog.csdn.net/lvqingyao520/article/details/78757478

版权

总结篇同时被 2 个专栏收录

60 篇文章 1 订阅

订阅专栏

学习篇

36 篇文章 0 订阅

订阅专栏

js优化之惰性加载函数

直接上案例，copy后保存为html文件，打开浏览器控制台即可看到效果。未优化的addEvent，每调用一次都会进行一次判断。而优化后的addEvent只在首次被调用时进行判断，其后再次调用时，将不再进行浏览器支持的事件监听判断。

注意：调用时，记得注释其他两个addEvent。

<body>

<div id="div1">div1</div>
</body>
<script type="text/javascript">

/* 优化方案一：方法重写后再调用*/
function addEvent (type, element, fun) {
if (element.addEventListener) {
console.log(123);
addEvent = function (type, element, fun) {
element.addEventListener(type, fun, false);
}
}
else if(element.attachEvent){
addEvent = function (type, element, fun) {
element.attachEvent('on' + type, fun);
}
}
else{
addEvent = function (type, element, fun) {
element['on' + type] = fun;
}
}
addEvent(type, element, fun);
}

/* 优化方案二：匿名函数重写与执行*/
var addEvent = (function(type, element, fun) {
if (window.addEventListener) {
console.log(123);
return function(type, element, fun) {
element.addEventListener(type, fun, false) //webkit、os
}
}
if (window.attachEvent) {
return function(type, element, fun) {
element.attachEvent('on' + type, fun) //IE浏览器
};
}
})();

/* 没有优化的添加事件方法：每次调用都会判断*/
function addEvent (type, element, fun) {
if (element.addEventListener) {
console.log(123);
element.addEventListener(type, fun, false);

}
else if(element.attachEvent){
element.attachEvent('on' + type, fun);
}
else{
element['on' + type] = fun;
}
}
var div = document.getElementById('div1');
addEvent( 'click',div, function() {
alert(1);
})
addEvent( 'click',div, function() {
alert(2)
})

</script>

惰性载入函数有两个主要优点：

第一是显而易见的效率问题，虽然在第一次执行的时候函数会意味赋值而执行的慢一些，但是后续的调用会因为避免的重复检测更快；

第二个是要执行的适当代码只有当实际调用函数是才执行，很多JavaScript库在在加载的时候就根据浏览器不同而执行很多分支，把所有东西实现设置好，而惰性载入函数将计算延迟，不影响初始脚本的执行时间。

惰性载入函数应用场景总结（以下2条件同时满足）：

1 应用频繁，如果只用一次，是体现不出它的优点出来的，用的次数越多，越能体现这种模式的优势所在；

2 固定不变，一次判定，在固定的应用环境中不会发生改变；