JavaScript运行原理
# 一. JavaScript 如何运行
# 1.1. Atwood 定律
我们先看一下官方对 Node.js 的定义:
- Node.js 是一个基于 V8 JavaScript 引擎的 JavaScript 运行时环境。
但是这句话对于很多同学来说,非常笼统:
- 什么是 JavaScript 运行环境?
- 为什么 JavaScript 需要特别的运行环境呢?
- 什么又是 JavaScript 引擎?
- 什么是 V8?
我们先来把这些概念搞清楚,再去看 Node 到底是什么?
Stack Overflow 的创立者之一的 Jeff Atwood 在 2007 年提出了著名的 Atwood 定律:
- Any application that can be written in JavaScript, will eventually be written in JavaScript.
- 任何可以使用 JavaScript 来实现的应用都最终都会使用 JavaScript 实现。
但是在发明之初,JavaScript 的目的是应用于在浏览器执行简单的脚本任务,对浏览器以及其中的 DOM 进行各种操作,所以 JavaScript 的应用场景非常受限。
- Atwood 定律更像是一种美好的远景,在当时看来还没有实现的可能性。
- 但是随着 Node 的出现,Atwood 定律已经越来越多的被证实是正确的。
但是为了可以理解 Node.js 到底是如何帮助我们做到这一点的,我们必须了解 JavaScript 是如何被运行的。
# 1.2. 浏览器内核
我们经常会说:不同的浏览器有不同的内核组成
- Gecko:早期被 Netscape 和 Mozilla Firefox 浏览器浏览器使用;
- Trident:微软开发,被 IE4~IE11 浏览器使用,但是 Edge 浏览器已经转向 Blink;
- Webkit:苹果基于 KHTML 开发、开源的,用于 Safari,Google Chrome 之前也在使用;
- Blink:是 Webkit 的一个分支,Google 开发,目前应用于 Google Chrome、Edge、Opera 等;
- 等等...
事实上,我们经常说的浏览器内核指的是浏览器的排版引擎:
- 排版引擎(layout engine),也称为浏览器引擎(browser engine)、页面渲染引擎(rendering engine)或样版引擎。
但是在这个执行过程中,HTML 解析的时候遇到了 JavaScript 标签,应该怎么办呢?
- 会停止解析 HTML,而去加载和执行 JavaScript 代码;
当然,为什么不直接异步去加载执行 JavaScript 代码,而要在这里停止掉呢?
- 这是因为 JavaScript 代码可以操作我们的 DOM;
- 所以浏览器希望将 HTML 解析的 DOM 和 JavaScript 操作之后的 DOM 放到一起来生成最终的 DOM 树,而不是频繁的去生成新的 DOM 树;
那么,JavaScript 代码由谁来执行呢?
- JavaScript 引擎
# 1.3. 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 从众多浏览器中脱颖而出;
这里我们先以 WebKit 为例,WebKit 事实上由两部分组成的:
- WebCore:负责 HTML 解析、布局、渲染等等相关的工作;
- JavaScriptCore:解析、执行 JavaScript 代码;
看到这里,学过小程序的同学有没有感觉非常的熟悉呢?
- 在小程序中编写的 JavaScript 代码就是被 JSCore 执行的;
另外一个强大的 JavaScript 引擎就是 V8 引擎。
# 1.4. 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 引擎本身的源码非常复杂,大概有超过 100w 行 C++ 代码,但是我们可以简单了解一下它执行 JavaScript 代码的原理:
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
image-20200924165143332
上面是 JavaScript 代码的执行过程,事实上 V8 的内存回收也是其强大的另外一个原因,这里暂时先不展开讨论:
- Orinoco 模块,负责垃圾回收,将程序中不需要的内存回收;
- Orinoco 的 V8 官方文档:https://v8.dev/blog/trash-talk
# 二。邂逅 Node.js
# 2.1. Node.js 是什么?
回顾:官方对 Node.js 的定义:
- Node.js 是一个基于 V8 JavaScript 引擎的 JavaScript 运行时环境。
也就是说 Node.js 基于 V8 引擎来执行 JavaScript 的代码,但是不仅仅只有 V8 引擎:
- 前面我们知道 Node.js 可以嵌入到任何 C ++ 应用程序中,无论是 Chrome 还是 Node.js,事实上都是嵌入了 V8 引擎来执行 JavaScript 代码;
- 但是在 Chrome 浏览器中,还需要解析、渲染 HTML、CSS 等相关渲染引擎,另外还需要提供支持浏览器操作的 API、浏览器自己的事件循环等;
- 另外,在 Node.js 中我们也需要进行一些额外的操作,比如文件系统读 / 写、网络 IO、加密、压缩解压文件等操作;
所以,我们可以简单理解规划出 Node.js 和浏览器的差异:
这里也有一份单独的 Node.js 的架构图:
- 我们编写的 JavaScript 代码会经过 V8 引擎,再通过 Node.js 的 Bindings,将任务放到 Libuv 的事件循环中;
- libuv(Unicorn Velociraptor— 独角伶盗龙)是使用 C 语言编写的库;
- libuv 提供了事件循环、文件系统读写、网络 IO、线程池等等内容;
- 具体内部代码的执行流程,我会在后续专门讲解事件和异步 IO 的原理中详细讲解;
# 2.2. Node.js 可以做什么?
了解了 Node.js 的架构,那么使用它我们可以做什么呢?
- 前面我们提到,Node.js 的出现,真正让 Atwood 定律变成了现实,Node.js 的应用场景也越来越多。
我们可以使用基于 Node.js 的 Electron 开发出类似于 VSCode 这种强大的桌面应用程序。另外前端自动化、模块化打包工具 gulp、webpack 也是基于 Node.js 开发和使用的。
Node.js 的快速发展也让企业对 Node.js 技术越来越重视,在前端招聘中通常会对 Node.js 有一定的要求,特别对于高级前端开发工程师,Node.js 更是必不可少的技能:
目前前端开发的库都是以 node 包的形式进行管理;
- npm、yarn 工具成为前端开发使用最多的工具;
- 越来越多的公司使用 Node.js 作为 web 服务器开发;
- 大量项目需要借助 Node.js 完成前后端渲染的同构应用;
- 资深前端工程师需要为项目编写脚本工具(前端工程师编写脚本通常会使用 JavaScript,而不是 Python 或者 shell);
- 很多企业在使用 Electron 来开发桌面应用程序;
总结一下,目前 Node.js 到底有哪些应用场景呢?
前后端页面渲染
- 支持项目同构开发
- 对于需要进行首屏优化、SEO 的页面进行后端渲染
开发命令行工具
- webpack、gulp 等都是基于 Node
- 开发自己独立的命令行工具(类似于 shell、Python 做的事情,对于前端更加友好)
桌面应用的开发
- 类似于 VSCode 这种强大的桌面应用
- 甚至开发桌面端类似于 wayward 大型游戏
进行服务器开发
- 拥有类似 express、koa 等强大的 web 框架
- 开发 Web Socket 等服务器
所以,作为前端开发工程师,Node.js 已经是我们必须掌握的核心技术。
# 2.3. Node.js 的安装
# 2.3.1. Node.js 下载安装
Node.js 是在 2009 年诞生的,目前最新的版本是分别是 12.18.4 以及 14.12.0:
- LTS 版本:相对稳定一些,推荐线上环境使用该版本;
- Current 版本:最新的 Node 版本,包含很多新特性;
这些我们选择什么版本呢?
- 如果你是学习使用,可以选择 current 版本;
- 如果你是公司开发,建议选择 LTS 版本;
Node 的安装方式有很多:
- 可以借助于一些操作系统上的软件管理工具,比如 Mac 上的 homebrew,Linux 上的 yum、dnf 等;
- 也可以直接下载对应的安装包下载安装;
我们选择下载安装,下载自己操作系统的安装包直接安装就可以了:
- window 选择.msi 安装包,Mac 选择.pkg 安装包,Linux 会在后续部署中讲解;
- 安装过程中会配置环境变量;
- 并且安装 node 过程中会安装 npm(Node Package Manager)工具;
我当前电脑上的版本:
- node 版本是 12.16.1;
- npm 版本是 6.14.8;
你应该已经发现,我这里使用的版本并不是 Node 的最新版本,无论是 LTS 或者 Current:
- 正好借助这里,和大家讲一下 node 的版本升级;
# 2.3.2. Node.js 版本管理
在实际开发学习中,我们只需要使用一个 Node 版本来开发或者学习即可。
但是,如果你希望通过可以快速更新或切换多个版本时,可以借助于一些工具:
- nvm:Node Version Manager;
- n:Interactively Manage Your Node.js Versions(交互式管理你的 Node.js 版本)
这里我演示管理工具:n
- n 是 TJ 方便 node 的版本管理,专门开发的;
- 官方介绍是:n - Interactively Manage Your Node.js Versions(交互式管理你的 Node.js 版本)
安装 n:直接使用 npm 安装即可
# 安装工具n
npm install -g n
# 查看安装的版本
n --version
2
3
4
安装最新的 lts 版本:
- 前面添加的 sudo 是权限问题;
- 可以两个版本都安装,之后我们可以通过 n 快速在两个版本间切换;
# 安装最新的lts版本
n lts
# 安装最新的版本
n latest
2
3
4
5
查看所有的版本,并且选择要使用的版本:
- 可以上下选择想使用的版本
# 查看所有的版本
n
2
查看当前 Node 的版本:
问题:这两个工具都不支持 window
- n:n is not supported natively on Windows.
- nvm:nvm does not support Windows
Window 的同学怎么办?
- 1. 并不是每个人都需要安装多个版本,在课堂上我会以最新的 Current 版本讲解几乎所有内容;
- 2. 接下来我会在 Mac 上面演练 n 工具的使用,windows 上可以使用 nvm-window 来完成;