浏览器的运行流程

63 阅读1分钟

微信图片_20230112094548.png 但是在这个执行过程中,HTML解析的时候遇到了JavaScript标签会停止解析HTML,而去加载和执行JavaScript代码;

微信图片_20230112095928.png JavaScript代码由JavaScript引擎来执行。 事实上我们编写的JavaScript无论你交给浏览器或者Node执行,最后都是需要被CPU执行的,所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行

V8引擎的原理

微信图片_20230112100459.png js引擎会在执行代码之前,会在堆内存中创建一个全局对象:Global Object(GO), 该对象 所有的作用域(scope)都可以访问,里面会包含Date、Array、String、Number、setTimeout、setInterval等等,其中还有一个window属性指向自己

微信图片_20230112105746.png

js引擎内部有一个执行上下文栈(Execution Context Stack,简称ECS),它是用于执行代码的调用栈, 全局的代码块为了执行会构建一个 Global Execution Context(GEC);GEC会 被放入到ECS中 执行;

在代码执行前,在parser转成AST的过程中,会将全局定义的变量、函数等加入到GlobalObject中,

但是并不会赋值;这个过程也称之为变量的作用域提升(hoisting)

在代码执行中,对变量赋值,或者执行其他的函数;

微信图片_20230112110535.png

微信图片_20230112110648.png

遇到函数如何执行

在执行的过程中执行到一个函数时,就会根据函数体创建一个函数执行上下文(Functional Execution Context,

简称FEC),并且压入到EC Stack中

在解析函数成为AST树结构时,会创建一个Activation Object(AO):

ü AO中包含形参、arguments、函数定义和指向函数对象、定义的变量;

作用域链:由VO(在函数中就是AO对象)和父级VO组成,查找时会一层层查找

微信图片_20230112110916.png

微信图片_20230112110950.png