JS运行时环境

预计阅读时间: 5 分钟

为什么要在学习前端工程化的时候,要先了解JS运行时环境呢?

因为JS运行时环境是前端工程化的基础,只有了解了JS运行时环境,才能更好的理解前端工程化的概念,基于JS运行时环境的特性,进行前端工程化的实践。

JS运行时环境和引擎的区别

JS运行时环境和JS引擎是密切相关但不完全相同的概念。

JS引擎

核心功能是解析和执行JavaScript代码,将JS代码转换为机器可执行的指令,负责代码的编译和运行。

JS运行时环境

更广泛的概念,包含JS引擎, 提供执行JavaScript所需的完整基础设施,添加额外的APIs和功能

比如:

  • 全局对象
  • 模块系统
  • 事件循环
  • 系统API接口
  • 运行时上下文

简单来说,JS引擎是JS运行时环境的核心,JS运行时环境是JS引擎的外围环境。

就好比如:

  • JS引擎 = 汽车的发动机
  • JS运行时环境 = 整辆汽车(包括发动机、控制系统、车身、座椅、轮胎等等)

总结一下:

特性JavaScript 引擎JavaScript 运行时环境
作用解析并执行 JavaScript 代码提供执行 JavaScript 所需的运行支持和额外功能
是否独立独立存在,专注于语言核心实现包含引擎,并围绕它提供更高层次的功能
内容包括解析器、编译器、垃圾回收器等包括引擎、API(DOM、文件系统等)、工具等
示例V8、SpiderMonkey、JavaScriptCore浏览器、Node.js

有哪些JS运行时环境?

  • 浏览器 (提供了DOM、BOM等Web API)
  • Node / Deno / Bun (提供了文件系统、网络等系统API)
  • 微信小程序 (提供了微信小程序的API, 如wx.requestwx.navigateTo等)
  • React Native (提供了一些React Native的API, 如AsyncStorageAlert等)
  • ...

它们都提供了JS引擎,都能执行JS代码,但是提供的API和功能有所不同。

目前主流小程序运行时是不提供或本就没有DOM和BOM的,它使用了一种两个线程并行的架构,一个线程负责渲染,一个线程负责逻辑处理。

浏览器环境

浏览器端运行时环境,是我们接触的最多的JS执行环境。

但是各厂商的浏览器对JS的支持程度不同,所以我们需要在不同的浏览器中进行兼容性处理。

绝大多数浏览器都提供以下的内容:

  • 内置JavaScript引擎,如Chrome(V8)、Firefox(SpiderMonkey)、Safari(JavaScriptCore)等等,用于解析和执行JavaScript代码
  • 提供DOM、BOM等Web API
  • 提供一些浏览器特有的API,如navigatorlocalStorage等等
  • 提供事件循环机制,用于处理用户交互、网络请求等异步操作
  • 提供一些开发者工具,如控制台、调试器等
  • ...

你可以通过CAN I USE网站查看不同浏览器对于不同特性的支持情况。

Node及其他环境

由于Node.js的出现,使得JS不仅可以在浏览器中运行,还可以在服务器端运行, 也可以在命令行中运行。

为什么标题中提到了其他环境呢?因为Node.js并不是唯一的JS运行时环境,还有其他一些JS运行时环境,如:

  • Deno
  • Bun
  • ...

各种JS运行时环境都提供了一些系统API,如文件系统、网络请求等,使得JS可以在不同的环境中运行。

目前市面上最流行的JS运行时环境是Node.js,它提供了大量的系统API,使得JS可以在服务器端运行,编写一些后端服务,及一些工具和脚本,如webpack、babel等。