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>