javascript异步加载方式方法及思考

最新推荐文章于 2025-08-19 08:41:01 发布

zero_lh

最新推荐文章于 2025-08-19 08:41:01 发布

阅读量658

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js随笔文章标签： javascript 异步浏览器 Labjs

本文链接：https://blog.youkuaiyun.com/u013162144/article/details/41211169

js随笔专栏收录该内容

7 篇文章

订阅专栏

本文详细总结了JavaScript加载方式，包括同步加载、使用defer和async属性、动态创建script元素、以及利用Labjs库实现异步加载。重点讨论了如何避免网页加载过程中的白屏现象，提供了解决方案并推荐了最佳实践。

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

有没有发现，很多网站加载前都有一段时间是空白的，（或加了一个加载的gif动画）。
自己也知道是一些资源的加载问题，今天就这问题，对javascript的加载方式进行一些总结（个人观点，有错勿喷，欢迎纠正！）

浏览器默认的加载方式是同步的（即阻塞式），如：

<span style="font-size:18px;"><script src="a.js"></script> 
<script src="b.js"></script>
<script src="c.js"></script></span>

它是先依次加载3个js文件后，在加载body里的内容，如果js较多，期间就会有一段时间白屏。

解决方法：

1.js文件放在</body>前（都懂的）

2.加上defer属性. （效果与1.相同）如：

<span style="font-size:18px;"><script src="a.js" defer="defer"></script> </span>

3.加上async属性

<span style="font-size:18px;"><script src="a.js" async ="async"></script>
<script src="b.js" async ="async"></script></span>

<span style="font-size:18px;"><script src="c.js" async ="async"></script></span>

这个方法实现了异步加载，但有问题。3个js与后面body里的内容同时加载，但其加载顺序不保证，（如果b依赖a,就可能出错）。
一般用于独立的js(如广告)。

4.动态创建script（既保证了异步，又能解决顺序问题）

<span style="font-size:18px;">function loadScript(url, callback){ 
	var script = document.createElement("script");
	script.type = "text/javascript"; 
        if (script.readyState){ //IE 
	      script.onreadystatechange = function(){ 
 	          if (script.readyState == "loaded" || 
	          script.readyState == "complete"){ 
 	                script.onreadystatechange = null; 
 			callback(); 
		} 
              }; 
	} else { //Others: Firefox, Safari, Chrome, and Opera 
 		script.onload = function(){ 
			 callback(); 
		 }; 
       } 
 	script.src = url; 
	document.body.appendChild(script); 
	};</span>

注：以上代码参考自一个自己感觉比较好的blog：http://www.jb51.net/article/34491.htm

5.Labjs库（http://labjs.com/）

      <span style="font-size:18px;">例1：
             $LAB.script("script1.js")
            .script("script2.js")
            .script("script3.js")
            .wait(function(){		// 等待所有script加载完再执行这个代码块
                script1Func();
                script2Func();
                script3Func();
    		});</span>

<span style="font-size:18px;">       例2：
             $LAB.script("script1.js","script2.js","script3.js")
            .wait(function(){		// 等待所有script加载完再执行这个代码块
                script1Func();
                script2Func();
                script3Func();
            });</span></span>

<span style="font-size:18px;">      例3：
             $LAB.script("script1.js")
            .wait()    			// 空的wait()只是确保script1在其他代码之前被执行
            .script("script2.js")       // script2 和 script3 依赖于 script1
            .script("script3.js")
            .wait()   			// 但是script2 和 script3 并不互相依赖,可以并行下载
            .script("script4.js")       
           //script4 依赖于 script1, script2 及 script3 .wait(function(){script4Func();});</span>

推荐方法4和5

当然还有很多方法（如:XHR Eval 、XHR Injection 、Script in Iframe ），这里不一一列举了。

个人观点，欢迎补充、纠正^_^！