浏览器环境与Node.js中运行JS脚本有什么区别

图 0：浏览器与 Node.js 宿主能力全貌对比

一、核心架构与宿主运行时组成

ECMAScript 规范仅定义了 JavaScript 语言本身的语法、类型、内置对象（如 Array、Promise、JSON）和执行上下文机制。然而，一段纯粹的 JavaScript 代码必须注入到宿主环境中才能完成实际任务。

当脚本在浏览器中运行时，宿主由浏览器的渲染进程构成。以主流的 Chromium 架构为例，其内部集成了 Google 的 V8 引擎用于解释和即时编译（JIT）代码，但同时注入了庞大的 Web API 集合（包括 DOM 树解析、CSSOM 计算、页面排版、BOM 视口控制和 Cookie 存储）。浏览器的主线程还需要兼顾脚本执行与 60Hz/120Hz 的渲染绘制。

而在 Node.js 中，宿主是一个脱离显示界面的服务端通用进程。Node.js 同样采用了 V8 引擎来解析执行 JavaScript，但它丢弃了所有与网页渲染相关的组件，转而引入了 C/C++ 编写的绑定层（Node.js Bindings）与跨平台异步 I/O 引擎 libuv。libuv 提供了事件循环、操作系统信号监听、系统线程池以及高并发网络通信能力，使 JavaScript 具备了直接管理系统底层资源的能力。

图 1：浏览器渲染环境与 Node.js 服务端架构的分层对比

二、全局对象与顶层变量差异

在任何 JavaScript 运行环境中，都有一个顶层全局对象用于挂载内置方法和未声明作用域的变量。然而，由于历史演进和宿主角色不同，两者的全局对象存在本质差异。

1. 浏览器中的 window

在浏览器主线程中，顶层对象是 window。它不仅代表 JavaScript 代码的全局命名空间，还代表当前浏览器的窗口标签页本身。

• 在非模块化的常规脚本中，通过 var a = 10; 声明的变量会直接被挂载为 window.a。
• 通过函数声明 function fn() {} 也会挂载为 window.fn。
• 提供与窗口交互的属性：window.document、window.location、window.history、window.innerWidth。

2. Node.js 中的 global 与模块隔离

在 Node.js 中，顶层全局对象为 global。与浏览器极其不同的是，Node.js 默认将每个文件作为一个独立模块来编译与执行。

• 在文件中使用 var a = 10; 只属于当前文件作用域（因为被外层模块包装函数包裹），绝不会挂载到 global.a 上。
• 提供面向进程和系统底层的信息：process（进程信息与控制）、Buffer（原始二进制缓冲区）、setImmediate。
• Node.js 中不存在 window、document、navigator。若在 Node.js 中直接访问 window，会直接抛出 ReferenceError: window is not defined。

3. 跨环境规范：globalThis

ECMAScript 2020 引入了标准的 globalThis 关键字。无论在浏览器、Node.js 还是 Web Worker 中，globalThis 都会统一指向当前环境的全局对象。在浏览器中 globalThis === window 为 true；在 Node.js 中 globalThis === global 为 true。

三、运行验证与故障排查步骤

为了实际观察这两个环境的区别，我们可以编写一个环境探针脚本，并在两个环境中分别执行，排查输出日志。

图 2：跨环境探针脚本执行与排查步骤

环境探针测试脚本：env-probe.js

// env-probe.js - 探测当前 JavaScript 执行宿主
function detectEnvironment() {
  const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
  const isNode = typeof process !== 'undefined' && Boolean(process.versions && process.versions.node);

  console.log('--- 运行环境探测结果 ---');
  console.log('是否为浏览器环境:', isBrowser);
  console.log('是否为 Node.js 环境:', isNode);
  console.log('globalThis 类型:', typeof globalThis);

  if (isBrowser) {
    console.log('当前视口宽度:', window.innerWidth);
    console.log('当前页面标题:', document.title);
  } else if (isNode) {
    console.log('Node.js 版本:', process.version);
    console.log('操作系统平台:', process.platform);
    console.log('当前工作目录:', process.cwd());
  }
}

detectEnvironment();

测试 1：在浏览器中运行

将上述代码保存或直接粘贴至 Chrome / Firefox 等浏览器的开发者工具 Console 控制台中执行：

测试 2：在 Node.js 中运行

在系统终端中直接执行 node 命令：

$ node env-probe.js

四、模块化机制与加载方式

代码拆分与模块管理是构建实际项目的核心，但浏览器与 Node.js 对模块的加载模式有着截然不同的路径依赖。

图 3：浏览器与 Node.js 四大核心机制对比矩阵

1. 模块寻址逻辑的区别

在浏览器中，所有的资源加载都通过 HTTP/HTTPS 网络协议发生。在原生 ES Module 下，浏览器无法自动推导无后缀的文件或去扫描 node_modules 目录：

<!-- 浏览器端原生加载：必须显式声明 type="module" 并提供完整的网络可达路径 -->
<script type="module">
  import { calculate } from './utils.js'; // 必须写清 .js 扩展名
  import confetti from 'https://cdn.skypack.dev/canvas-confetti'; // 或使用远程 CDN 地址
  calculate();
</script>

在 Node.js 中，由于可以直接访问本地文件系统，Node.js 实现了复杂的模块寻址算法。当使用 require('lodash') 时，它会自当前目录逐层向上查找 node_modules 文件夹，并根据其 package.json 中的 exports 或 main 字段定位物理文件入口。

五、事件循环（Event Loop）与任务调度的差异

JavaScript 是一门单线程语言，异步任务必须依赖事件循环来调度。然而，两者的调度管线与具体实现并不一致。

1. 微任务优先级的差别

虽然现代版本的 Node.js（从 Node 11 开始）在微任务的触发时机上已大幅向 HTML5 规范靠拢，但 Node.js 提供了浏览器所没有的 process.nextTick()。

// 测试微任务调度差异
console.log('1. 脚本开始');

setTimeout(() => {
  console.log('4. setTimeout 宏任务');
}, 0);

Promise.resolve().then(() => {
  console.log('3. Promise 微任务');
});

if (typeof process !== 'undefined' && process.nextTick) {
  process.nextTick(() => {
    console.log('2. process.nextTick 专用微任务');
  });
}

console.log('2/3. 脚本同步结束');

在 Node.js 中，process.nextTick 的回调会被存放在单独的 nextTickQueue 中。在当前同步调用栈执行完毕后，V8 引擎会首先清空 nextTick 队列，随后才会清空标准的 Promise 微任务队列。因此在 Node.js 中，process.nextTick 的执行顺序始终领先于 Promise。

2. 浏览器专属的渲染节拍

浏览器环境的核心任务是将计算结果呈现在屏幕上。因此浏览器的事件循环专门包含 requestAnimationFrame 阶段。这个回调函数精确发生在浏览器准备重绘下一帧（通常每 16.6ms 一次）之前执行。如果在浏览器中用一个计算量极大的 while(true) 循环占满主线程，用户在界面上点击按钮、选中文本都会完全卡死无响应。

Node.js 没有显示输出设备，其事件循环专注于网络套接字（I/O）、定时器（Timers）和系统轮询（Poll）。当 Node 进程的定时器和所有网络连接都处理完毕且没有待执行回调时，事件循环会自然结束，整个 Node.js 进程直接退出。

六、如何编写两端兼顾的同构代码（Isomorphic JS）

在现代全栈开发（例如 Next.js、Nuxt 或编写通用的数据加解密、校验库）中，经常需要同一份 JavaScript 逻辑既能在前端浏览器运行，又能在后端 Node.js 运行。要实现安全跨环境，必须遵守以下三项工程规范。

图 4：业务场景选型与同构设计决策树

同构代码示例：跨平台通用哈希与存储适配

// universal-storage.js - 同时兼容浏览器与 Node.js 的轻量级存储适配器
class UniversalStorage {
  constructor() {
    this.isBrowser = typeof window !== 'undefined' && typeof localStorage !== 'undefined';
    this.isNode = typeof process !== 'undefined' && Boolean(process.versions && process.versions.node);
    this.memoryFallback = new Map();
  }

  setItem(key, value) {
    if (this.isBrowser) {
      localStorage.setItem(key, value);
    } else if (this.isNode) {
      // 在 Node.js 环境下可选择降级为内存或引入 node:fs
      this.memoryFallback.set(key, value);
    } else {
      this.memoryFallback.set(key, value);
    }
  }

  getItem(key) {
    if (this.isBrowser) {
      return localStorage.getItem(key);
    } else {
      return this.memoryFallback.get(key) || null;
    }
  }
}

// 统一导出供双端使用
export const storage = new UniversalStorage();

七、差异总结表