javascript實現js腳本的的異步加載

時間 2019-11-07

原文原文鏈接

javascript實現js腳本的的異步加載，和圖片的異步加載稍有不一樣，script的異步加載須要藉助dom，所以有了侷限性javascript

<html>
	<head>
		<meta charset="utf-8" />
		<title>Javascript</title>
		<meta http-equiv="X-UA-Compatible" content="IE=7">
	</head>
	<body>
		
		<script type="text/javascript" charset="utf-8">

			function loadScript(url,callback)
			{
				

				var script = document.createElement('script');
				if(!!document.setAttribute)
				{

					script.setAttribute('type','text/javascript');
					script.setAttribute('charset','utf-8');
					script.setAttribute('language','javascript');
				}else{
					script['type'] ='text/javascript';
					script['charset'] = 'utf-8';
					script['language'] = 'javascript';
					
				}

				if (!!script.readyState)
				{

					script.onreadystatechange = function()
					{ 
					
						if (script.readyState == "loaded" ||script.readyState == "complete")
						{ 
							script.onreadystatechange = null; 
							callback(script); 
						} 
					}; 
				}else{

					script.onload = function()
					{
						script.onload = null;
						callback(script);
					}
				}

				script['src'] = url;

				document.head.appendChild(script);
			}

			loadScript('https://fbstatic-a.akamaihd.net/rsrc.php/v2/yv/r/wgFc3t0g5gk.js',function(script){
				console.log(script);
			});
			
		</script>
	</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~2014-11-30 更新~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~php

1. defer下載腳本（異步下載，當網頁加載完後才能夠執行其中的方法，保證執行順序）html

<script src="1.js" defer></script>

2.async下載腳本（異步下載，下載完成後便可執行，不保證執行順序）html5

<script src="2.js" async></script>

對於defer與async的選擇問題上，建議和瀏覽器當前加載頁面無關的腳本使用 async，不然使用defer或者也能夠放在html頁面底部。java

（注：頁面無關的腳本爲何要加載，白癡麼？No，對於瀏覽器而言，靜態文件會被緩存在瀏覽器中，下次加載會直接從緩存讀取，若是緩存沒有才會請求網絡。有人想知道js腳本下載不完整瀏覽器會加載麼，答案是瀏覽器會等待js腳本緩存完後加載，不用擔憂只加載了一半）瀏覽器

同時使用defer和async,html5瀏覽器會忽略defer(IE10+支持async)緩存

<script src="2.js" defer async></script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。