js异步加载解决方案

异步加载js方案

• defer:只能IE9以下,等dom文档完全解析完之后执行
  defer 是在 HTML 解析完之后才会执行，如果为多个的话，按照加载的顺序依次执行
  defer脚本会在DOMContentLoaded和load事件之前执行

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

• async:加载完才执行，W3C标准方法
  async 是在脚本加载完之后立即执行，如果为多个的话，执行顺序和加载顺序无关
  async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序

<script src="indedx.js" aysnc="aysnc"></script> 

如果想让任何浏览器兼容同一个文件，包括IE，应该去怎么写？

<script src="indedx.js" defer ="defer "></script> 
<script src="indedx.js" aysnc="aysnc"></script> 

这样写会引起冲突，async加载完立马会异步执行，defer执行完后会等到文档解析完才执行，他们不一定是谁先加载完，加载完之后代码会出现覆盖现象，所以就用下面这个方法，按需加载

• 创建script标签，插入到DOM，加载完毕后callback，按需加载

		function loadScript(url, callback) {
			var script = document.createElement('script');	//创建元素
			script.type = 'text/javascript';	//写上类型
			if (script.readyState) {
				script.onreadystatechange = function(){
					if(script.readyState == 'complete' || script.readyState == 'loaded') {  //浏览器的兼容
						callback || callback();
					}
				}
			}
			script.src = url;
			document.head.appendChild(script);	//添加节点
		}