Node.js系列一 - JavaScript运行原理

简介: 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实现。

image.png

但是在发明之初,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)或样版引擎

image.png                                         WebKit main flow

但是在这个执行过程中,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代码;

image.png                                                webkit内核

看到这里,学过小程序的同学有没有感觉非常的熟悉呢?

  • 在小程序中编写的JavaScript代码就是被JSCore执行的;

image.png

另外一个强大的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代码;
  • 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.png

上面是JavaScript代码的执行过程,事实上V8的内存回收也是其强大的另外一个原因,这里暂时先不展开讨论:


二. 邂逅Node.js



2.1. Node.js是什么?


回顾:官方对Node.js的定义:

  • Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境。

image.png

也就是说Node.js基于V8引擎来执行JavaScript的代码,但是不仅仅只有V8引擎:

  • 前面我们知道Node.js可以嵌入到任何C ++应用程序中,无论是Chrome还是Node.js,事实上都是嵌入了V8引擎来执行JavaScript代码;
  • 但是在Chrome浏览器中,还需要解析、渲染HTML、CSS等相关渲染引擎,另外还需要提供支持浏览器操作的API、浏览器自己的事件循环等;
  • 另外,在Node.js中我们也需要进行一些额外的操作,比如文件系统读/写、网络IO、加密、压缩解压文件等操作;

所以,我们可以简单理解规划出Node.js和浏览器的差异:

image.png                                       Chrome浏览器和Node架构区别

这里也有一份单独的Node.js的架构图:

  • 我们编写的JavaScript代码会经过V8引擎,再通过Node.js的Bindings,将任务放到Libuv的事件循环中;
  • libuv(Unicorn Velociraptor—独角伶盗龙)是使用C语言编写的库;
  • libuv提供了事件循环、文件系统读写、网络IO、线程池等等内容;
  • 具体内部代码的执行流程,我会在后续专门讲解事件和异步IO的原理中详细讲解;

image.png              What is Node.js? Where, when and how to use it with examples


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更是必不可少的技能:

image.png

                                               前端工程师岗位需求

目前前端开发的库都是以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版本,包含很多新特性;

image.png                                                 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;

image.png

              我的node版本

你应该已经发现,我这里使用的版本并不是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

安装最新的lts版本:

  • 前面添加的sudo是权限问题;
  • 可以两个版本都安装,之后我们可以通过n快速在两个版本间切换;
# 安装最新的lts版本
n lts
# 安装最新的版本
n latest

image.png                                                     安装lts版本

查看所有的版本,并且选择要使用的版本:

  • 可以上下选择想使用的版本
# 查看所有的版本
n

image.png                                                   查看和选择所有的版本

查看当前Node的版本:

image.png                                                          

                                                    查看当前的版本

问题:这两个工具都不支持window

  • n:n is not supported natively on Windows.
  • nvm:nvm does not support Windows

Window的同学怎么办?

  • 1.并不是每个人都需要安装多个版本,在课堂上我会以最新的Current版本讲解几乎所有内容;
  • 2.接下来我会在Mac上面演练n工具的使用,windows上可以使用nvm-window来完成;
相关文章
|
1月前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
184 19
|
5月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
276 24
|
7月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
175 32
|
7月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
7月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
7月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
7月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~