深入浅出JS—01 V8引擎与浏览器内核

前言

先说几句

• 基础不牢，地动山摇。切忌JS没学好就盲目搞一些框架，追一些潮流，纯属舍本逐末。
• JS写起来容易，掌握很难。之前贪快，潦潦草草的看书看视频写代码，以为自己会了，其实并不知其所以然，现在又来返工了
• 慢慢学，比较快。学习一定要踏实。代码是记忆也是肌肉记忆，要多练习。

JavaScript代码如何起作用的

JavaScript是高级程序语言，计算机不能直接读懂，需要解释器或者编译器将其翻译成计算机能看懂的机器码才能执行。JavaScript引擎能够“读懂”JavaScript代码，并准确地给出代码运行结果。如let a = 1 + 1; JavaScript引擎的作用就是（解析）这行代码，并且将a的值变为3。

对于编译型语言来说（如Java、C++、C），处理上述这些事情的叫编译器（Compiler），相应地对于JavaScript这样解释型语言则叫解释器（Interpreter）

• 编译器是将源代码编译为另外一种代码（比如机器码，或者字节码）
• 解释器是直接解析并将代码运行结果输出

• 解释型语言：JavaScript, python
  程序不需要提前编译，运行的过程中才用解释器编译成机器语言，边编译边执行
  • 跨平台性能好（根据平台不同生成不同的机器码）
  • 执行效率低 （现场编译，再执行）
• 编译型语言：C, C++
  需要先编译成另一种代码（机器码/字节码）存储在.exe文件中，再执行
  • 执行效率高（直接执行编译好的文件）
  • 跨平台性能差（编译好的文件有平台限制，不同CPU不一样）

V8引擎

V8是用C ++编写的Google开源高性能JavaScript引擎。JavaScript虽然是解释型的语言，但是很难界定JavaScript引擎到底算是解释器还是编译器。为了提高运行性能，在运行之前会先将JavaScript编译为字节码，然后再去执行字节码（这样速度就快很多，字节码比机器码简洁，占浏览器内存也少），这种将解释器和编译器功能结合的方式叫做即时编译Just-in-time Compiler。V8的工作原理如下：

• Parse模块会将JavaScript代码转换成AST
  因为解释器并不直接认识JavaScript代码。如果函数没有被调用，那么是不会被转换成AST的。PreParse（预解析）并不是一开始所有代码都需要执行，所以V8引擎就实现了Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行；

• Ignition是一个解释器，会将AST转换成ByteCode
  同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；如果函数只调用一次，Ignition会执行解释执行ByteCode；

• TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码
  如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是 number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码。

JS引擎和渲染引擎的关系

• 在浏览器中输入网址（例如www.baidu.com），域名服务器会查找该域名对应的IP地址，并发起网络请求，服务器返回挂载静态资源文件夹中的相应文件index.html
• 浏览器拿到index.html后，从上到下解析代码，遇到<link>标签就去请求.css资源，遇到<script>标签就去请求.js资源
• 浏览器内核包括JS引擎和渲染引擎。其中JS引擎负责将JS代码转换成CPU可以看懂的机器码，并执行，从而对DOM进行更改。渲染引擎中HTML Parser将HTML转化为DOM树，CSS Parser将CSS转化为Style Rules。之后将Style Rules和DOM树结合为Render树。进行排版布局，最后绘制出来。