JavaScript的发展与浏览器内核

一、JS的发展

Jeff Atwood (2007): Any application that can be written in JavaScript, will eventually be written in JavaScript.

任何可以被js代码实现的东西最终都会用js实现

1.1、应用指导

image.png

1.2、JS是一门解释型的高级编程语言

编程语言按照发展历史来说，可以划分为三个阶段：

• 机器语言：1000100111011000，一些机器指令；
• 汇编语言：mov ax,bx，一些汇编指令；
• 高级语言：C、C++、Java、JavaScript、Python；
  计算机能够识别是只是机器语言，因此我们编写的代码都会被解析转换。

二、浏览器内核

2.1浏览器渲染过程

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

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

• 在从服务器请求到对应的html、css、js资源以后，浏览器会对文件进行渲染

  
  
  image.png
  
  

  在执行渲染的过程中如果遇到了JavaScript标签，那么浏览器会停止解析HTML，而去加载执行JavaScript代码。JavaScript引擎就用来负责执行JavaScript代码。

2.2JavaScript引擎

• 我们知道，高级的编程语言都需要转换成机器指令才能被执行
• 这是因为无论是浏览器还是Node来执行js代码，最终都是交给cpu来执行的，但是cpu只认识自己的指令集，即机器语言。
• JavaScript引擎的作用就是帮助我们讲JavaScript代码翻译成cpu指令

2.3浏览器内核和js引擎的关系

以WebKit（一种浏览器内核）为例，WebKit由两部分组成的：

• WebCore：负责HTML解析、布局、渲染等等相关的工作；
• JavaScriptCore：解析、执行JavaScript代码；（js引擎）

2.4V8引擎

• V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等。
• V8引擎执行js代码的流程
  
  image.png
  
  Parse模块(包含词法分析和语法分析)会将JavaScript代码转换成AST（抽象语法树），这是因为解释器并不直接认识JavaScript代码；
• 如果函数没有被调用，那么是不会被转换成AST的 ；
• Parse的V8官方文档：https://v8.dev/blog/scanner

Ignition是一个解释器，会将AST转换成ByteCode（字节码）

• 同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；
• 如果函数只调用一次，Ignition会执行解释执行ByteCode；
• Ignition的V8官方文档：https://v8.dev/blog/ignition-interpreter

TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码；

• 如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；
• 但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码；
• TurboFan的V8官方文档：https://v8.dev/blog/turbofan-jit
• 由此可以得到，当用ts编写代码的时候由于类型约束，热点函数执行时候的类型不会发生变化，在一定程度上提高了浏览器的性能

本文仅作为学习笔记加上自己的理解，参考自coderwhy