异步加载js/css文件

页面中的js/css文件在页面加载的时候会阻塞页面的渲染,所以异步加载js/css文件常作为一种网页优化的方法。通过js在页面中动态的创建js和css的链接标签就可以实现js/css文件的一部加载,下面的方法允许我们可以将一个js/css资源列表通过数组的形式去实现文件的一部加载。

function loadSource(arr){
	var i = 0,len = arr.length,fragment = document.createDocumentFragment();
	for(;i<len;i++){
		var ext = arr[i].match(/\.[^\.]+$/)[0];
		switch(ext){
			case ".css":
				var link;
				if(typeof link=='undefined'){
					link = document.createElement("link");
					link.rel = "stylesheet";
					link.type = "text/css";
				}
				link.href = arr[i];
				fragment.appendChild(link);
				break;
			default: 
				var script;
				if(typeof script=="undefined"){
					script = document.createElement("script");
					script.type = "text/javascript";
				}
				script.src = arr[i];
				fragment.appendChild(script);
				break;
		}
	}
	document.getElementsByTagName("head")[0].appendChild(fragment);
}
  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章