浏览器的工作原理
- 大家有没有深入思考过：JavaScript代码，在浏览器中是如何被执行的？
认识浏览器的内核
- 我们经常会说：不同的浏览器有不同的内核组成
- Gecko：早期被Netscape和Mozilla Firefox浏览器浏览器使用；
- Trident：微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink；
- Webkit：苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用；
- pBlink：是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等;
- 等等...
- 事实上，我们经常说的浏览器内核指的是浏览器的排版引擎：
- 排版引擎（layout engine），也称为浏览器引擎（browser engine）、页面渲染引擎（renderingengine）或样版引擎
浏览器渲染过程
- 但是在这个执行过程中，HTML解析的时候遇到了JavaScript标签，应该怎么办呢？
- 会停止解析HTML，而去加载和执行JavaScript代码；
- 那么，JavaScript代码由谁来执行呢？
- JavaScript引擎
认识JavaScript引擎
- 为什么需要JavaScript引擎呢？
- 高级的编程语言都是需要转成最终的机器指令来执行的；
- 事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的；
- 但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行；
- 所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行；
- 比较常见的JavaScript引擎有哪些呢？
- SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；
- Chakra：微软开发，用于IT浏览器；
- JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；
- V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；
- 等等...
V8引擎的原理
- 官方对V8引擎的定义：
- V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等。
- 它实现ECMAScript和WebAssembly，并在Windows 7或更高版本，macOS 10.12+和使用x64，IA-32， ARM或MIPS处理器的Linux系统上运行。
- V8可以独立运行，也可以嵌入到任何C ++应用程序中。
V8引擎的解析图（官方）
V8执行的细节
-那么我们的JavaScript源码是如何被解析（Parse过程）的呢？
- Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换；
- Scanner会进行词法分析（lexical analysis），词法分析会将代码转换成tokens；
- 接下来tokens会被转换成AST树，经过Parser和PreParser：
- Parser就是直接将tokens转成AST树架构；
- PreParser称之为预解析，为什么需要预解析呢？
1.这是因为并不是所有的JavaScript代码，在一开始时就会被执行。那么对所有的JavaScript代码进行解析，必然会影响网页的运行效率； 2.所以V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行 3. 比如我们在一个函数outer内部定义了另外一个函数inner，那么inner函数就会进行预解析；
- 生成AST树后，会被Ignition转成字节码（bytecode），之后的过程就是代码的执行过程（后续会详细分析）。
JavaScript的执行过程
var age = 18
function foo() {
var age = 19
console.log(age)
}
var num1 = 20
var num2 = 30
var result = num1 + num2
console.log(result)
foo()
初始化全局对象
- js引擎会在执行代码之前，会在堆内存中创建一个全局对象：Global Object（GO）
- 该对象 所有的作用域（scope）都可以访问；
- 里面会包含Date、Array、String、Number、setTimeout、setInterval等等；
- 其中还有一个window属性指向自己
执行上下文栈（调用栈）
- js引擎内部有一个执行上下文栈（Execution Context Stack，简称ECS），它是用于执行代码的调用栈。
- 那么现在它要执行谁呢？执行的是全局的代码块：
- 全局的代码块为了执行会构建一个 Global Execution Context（GEC）；
- GEC会 被放入到ECS中 执行；
- GEC被放入到ECS中里面包含两部分内容：
- 第一部分：在代码执行前，在parser转成AST的过程中，会将全局定义的变量、函数等加入到GlobalObject中， 但是并不会赋值；
这个过程也称之为变量的作用域提升（hoisting） 4. 第二部分：在代码执行中，对变量赋值，或者执行其他的函数；
遇到函数如何执行？
- 在执行的过程中执行到一个函数时，就会根据函数体创建一个函数执行上下文（Functional Execution Context，简称FEC），并且压入到EC Stack中。
- FEC中包含三部分内容：
- 第一部分：在解析函数成为AST树结构时，会创建一个Activation Object（AO）： AO中包含形参、arguments、函数定义和指向函数对象、定义的变量；
- 第二部分：作用域链：由VO（在函数中就是AO对象）和父级VO组成，查找时会一层层查找；
- 第三部分：this绑定的值
作用域提升面试题
var age = 18
function foo() {
var age = 19
console.log(age)
}
var num1 = 20
var num2 = 30
var result = num1 + num2
console.log(result)
foo()
function foo() {
console.log(n)
var n = 200
console.log(n)
}
var n = 100
foo()
var n = 100
function foo1() {
console.log(n)
}
function foo2() {
var n = 200
console.log(n)
foo1()
}
foo2()
console.log(n)
var a = 100
function foo() {
console.log(a)
return
var a = 100
}
foo()
个人觉得弄懂了JavaScript的运行原理 这些问题应该都很简单的
