javascript的延时加载技术

最新推荐文章于 2025-08-15 22:56:20 发布

jennis19118

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量408

点赞数

CC 4.0 BY-SA版权

分类专栏：学习小结 javascript 文章标签： javascript 性能

本文链接：https://blog.youkuaiyun.com/u011751266/article/details/39500483

学习小结同时被 2 个专栏收录

4 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

本文介绍了一种使用懒加载来优化JavaScript性能的小技巧。通过在首次调用时根据条件重写函数，避免了后续不必要的条件检查，从而提高了执行效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习《高性能javascript》的时候看到了这个技术（小技巧）。

具体实现：

var bFlag = "a boolean value that get from checking something";
function doSomething() {
	// if check passed,do some thing
}
function doAnotherThing() {
	// if check not passed,do another thing
}
function beforeLazyLoad() {
	if ( bFlag ) {
		console.log( "check Passed" );
		doSomething();
	} else {
		console.log( "check not passed" );
		doAnotherThing();
	}
}
function lazyLoad() {
	if ( bFlag ) {
		lazyLoad = function() {
			console.log( "check Passed" );
			doSomething();
		}
	} else {
		lazyLoad = function() {
			console.log( "check not passed" );
			doAnotherThing();
		}
	}
}

在实际情况中，都不会将bFlag写成全局变量、或者写在方法之外。而是直接写在if else的条件体中

譬如说：

if ( target.addEventListener ) {
	// do something
} else {
	// do another thing
}

这边的target是任意dom元素。

那么，延迟加载有什么好处呢？回到刚才的那个实现。

我们每次调用beforeLazyLoad()的时候都会检测bFlag的值。（一般bFlag值在整个脚本运行期间是不会改变的）。

而我们知道浏览器特性检测也是有性能开销的（javascript的任何点操作（访问）都有开销），如果beforeLazyLoad将被调用多次，那么这个检测工作会多次重复，造成性能的浪费。

lazyLoad方法解决了这个问题，在lazyLoad第一次被调用时，将会选择合适的处理并重写原来的lazyLoad方法。以后每次调用lazyLoad方法，都将不再检测bFlag值。