异步加载时间线

异步加载js

1. defer异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写道内部。

<script defer="defer"></script>
<script defer></script>

2. aysnc （W3C标准方法）异步加载，加载完就执行，async只能加载外部脚本（只能写src=""），不饿能把js写在script标签里。

<script aysnc></script>
<script aysnc></script>

	<script>
		var script = document.createElement('script');
		
	<script>

我们来看这样的代码：

	<script>
		var script = document.createElement('script');
		script.type = "text/javascript";
		script.scr = "demo.js";
		document.head.appendChild(script);
		test();
	</script>

	//demo.js
	function test() {
		console.log('a');
	}

这样写script标签里面的test()，执行不出来会报错，因为程序执行是很快的 而下载则慢,当执行到 test
()的时候 demo.js还没有下载完，所以此代码会报错。
改：

	<script>
		var script = document.createElement('script');
		script.type = "text/javascript";
		script.scr = "demo.js";
		if(script.readyState){
			//IE下有另一种方法:
			script.onreadystatechange = function () {
				if(script.readyState == "complete" || script.readyState == "loaded") {
					test();	
				}
			}
		}else{
				script.onload = function() {  //适用各种浏览器，就是不适用IE
				test();
				}
		}
		document.head.appendChild(script);
	</script>

window.onload确保了它下载完了，下载完之后再去执行，就好了。
封装一个函数：需要异步加载script标签的函数：

	function loadScript(url, callback) {
		var script = document.createElement('script');
		script.type = "text/javascript";
		if(script.readyState) {
			//IE下有另一种方法:
			script.onreadystatechange = function () {
				if(script.readyState == "complete" || script.readyState == "loaded") {
					callback();	
				}
			}
		}else{
				script.onload = function() {  //适用各种浏览器，就是不适用IE
				callback();
				}
		}
		script.scr = "url";
		document.head.appendChild(script);
	}
	</script>

我们来用一下：

//demo.js
	function() {
		console.log('a');
	}

	loadScript('demo.js', test);
	//这样写直接报错，函数不知道test是什么

我么来修改一下啊：

	loadScript('demo.js', function(){
		test();
	});
	//这样就好了

js加载时间线

js加载时间线（非常重要）
创建document对象，开始解析web页面。document.readyState = ‘loading’
遇到link外部css，异步加载
遇到script外部js，未设置异步的，阻塞文档
遇到script外部js，设置异步的，异步加载（禁止使用document.write，他能把之前的文档流清空）
遇到img，正常解析dom，异步加载src
文档解析完成（domTree完成），document.readyState = ‘interactive’
文档解析完成，设置defer的脚本执行
文档解析完成，document对象触发DOMContentLoaded(只能用addEventListener绑定，浏览器转为事件驱动
整个页面加载完毕，document.readState=“complete”，即window.onload

如果要把script标签写在dom前面，就要这样写：