01-浏览器是如何解析JavaScript代码的（浏览器的工作原理）

1. JavaScript是一门高级的编程语言

 

纵观编程语言的发展史，可以归纳为三个阶段：

机器语言：1000100111011000，一些机器指令；

汇编语言：mov ax,bx，一些汇编指令；

高级语言：C C++ Python JavaScript;

整体的发展趋势：人性化发展，在使用（编码）过程中越来越趋于人的思维。

例如： if 如果 else 否则 =赋值....

但是计算机本身不认识这些高级语言，所以我们在电脑上编写的代码最终还是转化为机器语言才能够执行，如何进行转化 不同的编程语言，有不同的编译器或解释器（也是由编程语言开发的软件）。

例如：

Python 解释器 CPython（由C语言开发）

JavaScript 编译器 V8引擎（由C++开发）

注意：一种编程语言对应的解释器可以有多种，以上介绍到的只是针对该编程语言常用的解释器

2. 浏览器的工作原理

解释：

在浏览器地址栏中输入url地址 例如 www.baidu.com 点击回车，总体来说分为以下几个过程:

• DNS 解析:将域名解析成 IP 地址
• TCP 连接：TCP 三次握手
• 发送 HTTP 请求
• 服务器处理请求并返回 HTTP 报文
• 浏览器解析渲染页面
• 断开连接：TCP 四次挥手

此次重点讲解的是浏览器是如何解析渲染页面的 ，先要从浏览器的内核说起：

我们经常会说：不同的浏览器有不同的内核组成

Gecko： 早期被Netscape和Mozilla Firefox浏览器浏览器使用；

Trident： 微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink；

Webkit： 苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用；

Blink： 是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等；

等等...

事实上，我们经常说的浏览器内核指的是浏览器的排版引擎：

p 排版引擎 （layout engine），也称为 浏览器引擎 （browser engine）、 页面渲染引擎 （rendering engine）

或 样版引擎 。

这里我们先以WebKit为例，WebKit事实上由两部分组成的：

WebCore： 负责HTML解析、布局、渲染等等相关的工作；

JavaScriptCore： 解析、执行JavaScript代码；

总结：

        我们之所以能够从浏览器中看到网页，原因是因为浏览器内核工作的结果，浏览器内核大致分为两部分，一个是负责解析html的 一个是负责解析并执行JavaScript代码的 ，当然还应该包括负责解析css的，不同的浏览器内核所使用到的这两部分是不同的（上文提及到一种编程语言可以有多种编译器）；

        也就是说浏览器通过向服务发送请求，得到请求的网页（html文件），并对html文件中的内容进行解析，在解析过程中如果遇到link标签就再去请求css文件，如果遇到script标签就去请求js文件。具体的解析过程如图所示：

V8引擎的执行原理：

那么V8引擎是如何解析js代码在的呢（js代码不能直接交给cpu执行 需要转化成机器码）

1.js代码会经过V8引擎中Parse模块进行语法的解析 生成AST（抽象语法树）

js代码解析分为 词法分析 和语法分析 

词法分析：会对代码中的每个词进行切割 分析 最终生成tokens（对象数组） 例如：

每个单词都是具有不同的作用的，根据每个词的作用不同（type）在进行语法分析

语法分析：根据词法分析的结果生成AST树(以下是可以在线生成抽象语法树的网站)

 

抽象语法树是一个很重要的概念，在很多地方都有引用

Bable：下一代js语法的编译器  作用：将ES6的代码转化成ES5 、把TS代码转化成js代码运行

vue template：

 

 为什么要转化为抽象语法树？

        因为树结构是固定的，格式、关键字是固定的 不管是做转化还是做操作都是非常方便的

2.抽象语法树会经过Ignition模块生成字节码

 为什么不直接转化成机器码呢？

        因为当前的js代码运行在什么样的环境下面是不确定的，可能会运行在mac系统中的浏览器上面 也有可能运行在win 系统的浏览器中 还有可能运行在Linux系统浏览器中 不同的欢迎拥有不同的cpu，不同的cpu有不同的cpu架构 能够执行的机器指令是不一样的 而ignition就很难知道转化成什么样的机器指令 而转化成字节码 字节码是跨平台的在任何的平台上都可以运行 ，最后字节码还需要转化成汇编代码 汇编代码再去执行

下面的内容解释：

 字节码每次都会转化成汇编指令 再去执行会比较消耗性能，TurboFan 会由Ignation模块搜集一些函数的执行信息 对于执行频率比较高的函数标记成 hot （热函数:需要多次执行的函数） 再由 TurboFan模块转化成优化之后的机器指令 直接运行就可以了 但是这时就会出现一个问题 例如有一个函数被转化成机器指令之后 机器指令直接执行 两个数值相加就可以了，但是突然有一个地方出现了两个字符串相加 字符串相加是拼接 就不是两数相加了 所以之前的机器指令就不能够在运行了，这时候就会进行反向的优化 从机器指令又转化回了字节码 最后再执行

由此我们可以得出结论在编码过程中 调用函数时 尽可能传入相同类型的参数，在v8引擎中是对我们的代码进行优化的

3.字节码会转化成汇编指令（机器指令）执行

总结：