预编译
预编译又称为预处理,是做些代码文本的替换工作。是整个编译过程的最先做的工作。
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、从此,以异步响应方式处理用户输入、网络事件等。