异步加载JS

  平时最常使用的就是这种同步加载形式：
   <script src="http://yourdomain.com/script.js"></script>
   同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。
js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。
   以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。
   简单说：加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并发模型。

常见异步加载（Script DOM Element）

(function() { 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
})(); 

例如 Google Analytics 和 Google+ Badge 都使用了这种异步加载代码：

(function() { 
var ga = document.createElement('script'); 
ga.type = 'text/javascript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 

(function() 
{var po = document.createElement("script"); 
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; 
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(po, s); 
})(); 

百度地图的异步加载：

	var map;  //全局地图
	function initialize() {
		map = new BMap.Map('map');
		var point = new BMap.Point(121.491, 31.233);
		map.centerAndZoom(point, 11);
		//使用鼠标滚轮控制缩放
		map.enableScrollWheelZoom();
		//添加地图控件
		map.addControl(new BMap.NavigationControl());
		map.addControl(new BMap.ScaleControl());
		map.addControl(new BMap.OverviewMapControl());
		map.addControl(new BMap.MapTypeControl());
		//点击地图就添加标注点
		map.addEventListener("click", addMarkerService);
		PanOptions.noAnimation=false;
	}
	function loadScript() {
		var script = document.createElement("script");
		script.src = "http://api.map.baidu.com/api?v=1.5&ak={No}&callback=initialize";
		//此为v1.5版本的引用方式  
		// http://api.map.baidu.com/api?v=1.5&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式  
		document.body.appendChild(script);
	}
	window.onload = loadScript;

但是，这种加载方式在加载执行完之前会阻止 onload 事件的触发，而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等，所以还是会阻塞部分页面的初始化处理。

(function() { 
function async_load(){ 
var s = document.createElement('script'); 
s.type = 'text/javascript'; 
s.async = true; 
s.src = 'http://yourdomain.com/script.js'; 
var x = document.getElementsByTagName('script')[0]; 
x.parentNode.insertBefore(s, x); 
} 
if (window.attachEvent) 
window.attachEvent('onload', async_load); 
else 
window.addEventListener('load', async_load, false); 
})(); 

这和前面的方式差不多，但关键是它不是立即开始异步加载 js ，而是在 onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。
补充：DOMContentLoaded 与 OnLoad 事件
DOMContentLoaded : 页面(document)已经解析完成，页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。
OnLoad：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。
这两个时间点将页面加载的timeline分成了三个阶段。

 

异步加载的其它方法
由于Javascript的动态特性，还有很多异步加载方法：
XHR Eval
XHR Injection
Script in Iframe
Script Defer
document.write Script Tag
还有一种方法是用 setTimeout 延迟0秒 与 其它方法组合。
XHR Eval ：通过 ajax 获取js的内容，然后 eval 执行。
var xhrObj = getXHRObject();

xhrObj.onreadystatechange = 
function() { 
if ( xhrObj.readyState != 4 ) return; 
eval(xhrObj.responseText); 
}; 
xhrObj.open('GET', 'A.js', true); 
xhrObj.send('');