Js的同步、异步及时间线

一、同步加载

同步加载又称为阻塞模式，是我们常用的默认的模式。

<script type="text/javascript" src="load.js"></script>
<script type="text/javascript">
    console.log('Hello');
</script>

当浏览器解析文档遇到script标签时，会阻止浏览器的后续解析，停止后续的解析，将当前遇到的js加载完成后，才能进行下一步操作，但如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞，严重影响用户体验。所以一般建议把

二、异步加载

js加载默认是同步加载的，但同步加载会阻塞文档，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。但是有些工具js文件是不会改变页面的，用到时再加载，不用时不加载，可以提升效率，所以就用到了异步加载。
异步加载有三种模式：
1、defer，IE专用
代码执行时间：当整个网页解析完，执行代码（在网页加载完之前）

<script src="load.js" defer></script>
<script defer>
     console.log('Hello');
 </script>

2、async

加载完就执行	W3C的标准。
注意：async 只能加载外部脚本，不能把js写在script标签里。 

3.创建一个script标签，插入到DOM中，加载完毕后callback 兼容性最好的

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') {
				tools[callback]();	//执行callback函数，要求工具函数以都包在“tools”对象中
			}
		}
	} else {
		script.onload = function () {
			//chrome firefox safari oprea
			tools[callback]();
		}
	}
	script.src = url;	//当执行到这一行代码时就开始下载srcipt脚本了
	document.head.appendChild(script);	//当执行到这里时代码被写入到文档中，如果下载好了就开始执行
}
//调用方式： 调用loadScript（）方法，函数名通过字符串形式传入

loadScript('tools.js', 'test')

Js时间线

js加载时间线的步骤：

1.创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段 document.readyState = ‘loading’ 。loading （加载）

2.遇到link外部css，创建线程加载，并继续解析文档。

3.遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞html，css，等待js加载完成并执行该脚本，然后继续解析文档（ html css）。

4.遇到script外部js，并且设置有async、defer，浏览器创建线程加载，并继续解析文档。 对于async属性的脚本，脚本加载完成后立即执行。（禁止使用document.write(), 因为有可能会清空DOM树）

5.遇到img等，先正常解析dom结构，然后浏览器异步加载src，并继续解析文档。此时DOM树上有img标签但是没有加载src

6.当文档解析完成，document.readyState = ‘interactive’ 。 interactive （交互的）

7.文档解析完成后，所有设置有defer的脚本会按照顺序执行。（禁止使用document.write())。

8.document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段（浏览器正常发挥功能）。

9.当所有async的脚本加载完成并执行后、img等加载完成后，document.readyState = ‘complete’，complete （完成）window对象触发load事件。

10.从此，以异步响应方式处理用户输入、网络事件等。