JavaScript引擎解析过程


JavaScript引擎

JavaScript引擎就是一段可以"读懂"JavaScript代码,并且给出代码运行结果的程序。

对于静态语言(如:C、C++、Java),处理上述这些事情的叫编译器Compiler。对于JavaScript这样的动态语言则被称为解释器Interpreter。不同的地方在于编译器是将源代码编译为另外一种代码(比如:机器码、或者字节码),而解释器是直接解析并将代码运行结果输出。

但是JavaScript引擎很难定界算是解释器还是编译器。Chrome JS引擎V8是用C++编写的,为了提高浏览器执行JavaScript的性能,V8将JavaScript转为了更高效的机器码(JIT编译器:Just-In-Time compiler),而不是使用解释器。

JavaScript执行

JavaScript代码的执行过程大致可以分为语法检查和运行两个阶段

语法检查

语法检查包括词法分析和语法分析

  • 词法分析,会将字符组成的字符串分解为有意义的代码块。这些代码块被称为词法单元。

例如:对于程序var a = 2;,会被分解为 var a = 2 ;

  • 语法分析,会将词法单元流转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。

这个树被称为`抽象语法树(Abstract Syntax Tree,AST)

例如:上面的的词法单元流var a = 2 ; 会被转为下方所示的AST

运行阶段

运行阶段包括预编译和执行

  • 预编译,将生成AST复制到当前执行的上下文中。对当前AST中的变量声明、函数声明及函数形参进行属性填充。

  • JavaScript逐行读取并运行代码

声明提前

声明提前(hoisting),指的是JavaScript会默认将声明移到作用域顶部。意味着我们可以在声明前就使用。

  • 对于var声明的变量只是将声明提前到顶部,赋值还是在位置

		console.log(name);   //undefined;不会报错
		
		var name = "chenjy";
		
		console.log(name);   //chenjy

  • 对于function声明的函数,会将函数名称和函数体都提前

       foo();   //chenjy
		
		function foo(){
			console.log("chenjy");
		}

  • 变量声明早于函数


		foo();  //chenjy
		function foo(){
			console.log("chenjy");
		}
		
		var foo = function(){
			console.log("Tom");
		};


        foo();  //2
		
		function foo(){
			console.log("1");
		}
		
		foo();  //2
		
		function foo(){
			console.log("2");
		}
		
		foo();  //2
		
		var foo = function(){
			console.log("3");
		};
		
		foo();  //3

声明提前在预编译阶段完成。

let 、const不适用 声明提前

JavaScript异步

  • JavaScript是单线程语言

如果有两个进程操作一个dom,同时下达了2个矛盾的指令编辑删除,浏览器会不知道怎样去执行指令。

但是单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。对于用户来说就会出现卡死
情况,用户的体验就会很差。

但是单线程怎样实现异步呢?

任务队列

JavaScript设计者发现很多时候排队并不是因为计算量过大cpu忙不过来,而是因为IO设备很慢(比如:Ajax操作从网络读取数据)不得不等到结果,再往下执行。
所以此时主线程可以完全不管IO设备,而是把等待中的任务挂起,先执行后面的任务。等到IO设备返回结构后,再继续执行挂起的任务。

JavaScipt中所有任务可以被分为两种一种是同步任务synchronous,另一种是异步任务asynchronous。同步任务指的是在主线程上排队执行的任务。异步任务指的就是那些不进入主线程,而进入任务队列的任务,只有任务队列
通知主线程,某个异步任务可以执行了,它才会进入主线程。

主线程的工作机制可以理解为:

  1. 所有同步任务在主线程执行,形成一个执行栈(execution context stack)

  2. 在主线程外还存在一个任务队列(task queue),只要异步任务有了返回结果就会在任务队列中放置一个事件

  3. 所有的执行栈中任务执行完毕以后,开始读取任务队列中的事件,并且结束对应的异步任务,进入执行栈,开始执行

  4. 主线程不断的重复第三步

主线程从任务队列读取事件的过程是循环不断的,所以这种机制又被称为Event Loop(事件循环)

定时器

除了放置异步任务的事件,任务队列还可以放置定时事件。

定时器主要由setTimeout()和setInterval()这两个函数来完成,二者的内部运行机制完全一样。

例如setTimeout(fn,time)指定某个任务最早在主线程空闲多少时间执行。要等到同步任务和任务队列现有的事件都处理完,才会得到执行。


		console.log("1",new Date());
		
		setTimeout(function(){
			console.log("3",new Date());
		},3000);
		
		console.log("2",new Date());
		

即使设置的time为0


		setTimeout(function(){
			console.log("2",new Date());
		},0);
		
		console.log("1",new Date());


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM