JS/CSS module LazyLoad 之一

最新推荐文章于 2025-05-11 14:00:00 发布

转载最新推荐文章于 2025-05-11 14:00:00 发布 · 74 阅读

本文介绍了一种提高网页加载效率的方法——JS惰性加载。通过延迟加载非关键JS文件，可以显著提升页面首屏渲染速度。文章提供了具体的实现代码及使用示例。

随着web app中JS越来越多，有时页面首次加载时有很多JS并没有用到。这时为了提高下载速度，提高页面渲染效率就需要让这部分暂时不用的JS延迟加载，即只在用到它们的时候再下载。这里会先实现一个最简单JS的惰性加载。后续几篇会逐步加强功能直至一个完整的JS/CSS模块加载库。这个系列里我不会实现队列，即各个JS文件是并行下载的，只有当多个JS全部下载后才执行回调。当然在第二个系列JS Queue LazyLoad中会实现各个JS文件顺序加载，每个JS文件下载后都有一次回调机会。这两种方式有各自的应用场景。

先给出使用接口

LazyLoad.js(
	urls  // js文件路径
	fn    // 全部加载后回调函数
	scope // 指定回调函数执行上下文
);

示例

LazyLoad.js(['a.js','b.js','c.js'], function(){
	alert('加载完毕');
});

Firebug中效果如下，a,b,c三个文件几乎是同一时间开始下载的。

这个系统会尽全力去加载所有的JS文件，即当某个文件不存在或加载失败它不会就此中断，仍然会去加载其它的JS文件。直到所有的模块都加载了一次才去回调。

完整代码

LazyLoad = function(win){	
	var list,
		isIE = /*@cc_on!@*/!1,
		doc = win.document,
		head = doc.getElementsByTagName('head')[0];

	function createEl(type, attrs){
		var el = doc.createElement(type),
			attr;
		for(attr in attrs){
			el.setAttribute(attr, attrs[attr]);
		}
		return el;
	}
	function finish(obj){
		list.shift();
		if(!list.length){
			obj.fn.call(obj.scope);
		}
	}
	function js(urls, fn, scope){
		list = [].concat(urls);
		var obj = {scope:scope||win, fn:fn};
		for(var i=0,len=urls.length; i<len; i++){
			var script = createEl('script', {src: urls[i]});
			if(isIE){
				script.onreadystatechange = function(){
					var readyState = this.readyState;
					if (readyState == 'loaded' || readyState == 'complete'){
						this.onreadystatechange = null;
						finish(obj);
					}
				}
			}else{
				script.onload = script.onerror = function(){
					finish(obj);
				}
			}
			head.appendChild(script);
		}
	}
	return {js:js};
}(this);

example下载