JS 时间线的理解

预编译

预编译又称为预处理，是做些代码文本的替换工作。是整个编译过程的最先做的工作。
javascript是解释性语言，主要特点为解释一行执行一行，遇到错误直接停止。但是在js执行之前，js引擎会提前做两件事情。

1、语法分析：就是检查代码有什么语法错误，如果没有语法错误，则进行下一步
2、预编译：就是在内存中开辟一些空间，存放一些变量和函数
ps:这两件事做完之后，才是逐行解释执行代码。

预编译的四部曲：

1、创建GO(Global Object)或者AO(Activation Object)对象
GO是对于window而言，即在全局中。而AO是对于函数而言，一个函数执行，会对应产生一个AO。

2、找形参和变量声明，将变量和形参名作为AO属性名，赋值为undefined
3、将形参和实参相统一，也就是将实参的值赋值给形参

此处当一个实例来更加形象的说明：

 function fn(a){
注意!!!	 	console.log(a);      //	   注意!!!  输出为：function a(){}

	 	var a = 111;
	 	console.log(a);             // 输出为：111

	 	function a(){}
	 	console.log(a);          // 输出为：111

	 	var b = function (){}
	 	console.log(b);           //输出为： function (){}

	 	function d (){}
	 }
	 fn(1);

根据步骤让我们逐层分析，抽丝剥茧：

了解之后我们便可以
进一步理解JS时间线究竟是如何实现的了：
函数中的预编译过程中（发生在函数执行前一刻）：

**step1:** 创建AO(Activation Object) 活跃对象   执行期上下文 --> 函数作用域
	AO{

	}

**step2:**找形参和变量声明 将变量和形参作为AO的属性名 值为undefined
	AO{
		a : undefined,
		b : undefined,
	}

**step3:**将实参和形参统一
	AO{
		a : 1,
		b : undefined,
	}
**step4：**在函数里面找函数声明，值赋予函数体
	AO{
		a : function a(){},
		b : undefined,
		d ：function d(){}
	}

在函数 fn(1)执行时：

AO{
			a : 111,
			b : function (){},
			d ：function d(){}
		}

**ps:**注意：1、如果函数是以变量的形式进行定义的，这种情况将不能进行函数提升，而仅仅是进行变量提升，也就是说AO对象里面的对应的变量的值为undefined
2、如果遇到函数名与变量名相同的情况，根据上面的顺序，函数名会覆盖掉变量名。

js 加载时间线

1、创建document对象，开始解析web页面。创建HTMLHtmlElement对象，添加到document中。这个阶段document.readyState = ‘loading’；

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

3、遇到script外部js，并且没有设置async、defer，浏览器创建线程加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。js拥有修改dom的能力–>domcument.write；

4、遇到script外部js，并且设置有async、defter，浏览器创建线程加载，并继续解析文档；

defer属性设置后，表示加载script外部js和解析html页面是异步，并且等到html解析完成再执行js解析后的代码；

async属性设置后，表示加载script外部js和解析html页面是异步，但是当js解析完成，立刻执行它，此时html解析是被阻塞的；

document.createElement(‘script’)的方式动态插入script元素来模拟async属性，实现脚本异步加载和执行；

5、遇到img等，浏览器创建线程加载，并继续解析文档。并发；

6、当文档解析完成，document.readyState = ‘interactive’；

7、文档解析完成后，所有设置有defer的脚本会按照顺序执行（注意与async的不同）；

8、document对象触发DOMContentLoaded事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段；

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

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