TypeScript 极致优化：如何将代码速度提升 10 倍

您的 TypeScript 代码运行缓慢？是时候深入探究了

您用 TypeScript 编写了完美的代码。类型标注到位，抽象设计优雅，测试全部通过。但生产服务器却“卡顿”，React 组件渲染出现延迟。熟悉吗？问题往往不在于逻辑，而在于我们直到负载真正到来时才注意到的 TypeScript 性能。

在本文中，我们不讨论编译速度——那是另一个话题。我们将专注于运行时性能：如何对已完成的代码进行性能分析，找到“瓶颈”，并 优化 TypeScript，让应用程序飞起来。您将了解为什么 map 比 forEach 快 10 倍，GC 如何拖垮 FPS，以及哪些性能分析工具是必备的。

TypeScript 性能分析工具：从 Chrome 到 Node.js

在进行优化之前，需要先弄清楚毫秒都消耗在哪里。为此，TypeScript 有三种主要的性能分析方法。

1. Chrome DevTools Performance 标签页

如果您编写前端代码，您最好的朋友就是 Chrome DevTools 中的 Performance 标签页。录制性能分析文件将为您展示完整的画面：哪个 JavaScript 执行时间最长，垃圾回收花费了多少时间，以及 FPS 在何处“下降”。TypeScript 编译后就是纯 JavaScript，因此性能分析器看到的就是实际执行的代码。

// 示例：在浏览器中分析“繁重”的计算function processLargeArray(items: number[]): number[] {  const result: number[] = [];  for (let i = 0; i < items.length; i++) {    // 模拟繁重工作    result.push(items[i] * Math.sqrt(items[i]));  }  return result;}

console.time('processLargeArray');const data = Array.from({ length: 100000 }, (_, i) => i);processLargeArray(data);console.timeEnd('processLargeArray');

打开 Performance 标签页，点击 Record，执行这段代码——您将看到精确的执行时间以及调用堆栈。如果函数耗时超过 100ms，就该考虑优化 TypeScript 代码了。

2. Node.js Profiler（--prof 和 --inspect）

对于基于 Node.js 和 TypeScript 的后端，请使用内置的性能分析器。使用 --prof 标志启动应用程序：

node --prof dist/server.js

运行结束后，会生成一个 isolate-*.log 文件。将其转换为可读格式：

node --prof-process isolate-*.log > processed.txt

在文件中，您将看到哪些函数（包括编译后的 TypeScript 中的函数）消耗了最多的 CPU。这是在生产环境中进行 TypeScript 性能分析 不可或缺的工具。

3. 通过 Clinic.js 使用 V8 CPU Profiler

为了获得更直观的分析，请使用 Clinic.js。它能生成漂亮的火焰图，并显示 TypeScript 代码在何处“卡顿”。

npm install -g clinicclinic doctor -- node dist/server.js

测试完成后，打开 HTML 报告——您将看到哪些函数占用了 90% 的时间。这些往往是一些意想不到的地方：例如，频繁调用 JSON.parse 或未优化的循环。

TypeScript 代码优化的五大技巧

当性能分析器指出了“热点”后，就该进行优化了。以下是我在自己的项目中使用的五种经过验证的加速 TypeScript 的方法。

1. 如果只需要 forEach，请避免使用 map

听起来很奇怪，但 map 会创建一个新数组，即使您不使用它。如果您只需要执行某个操作，请使用 forEach 或经典的 for 循环。

// 慢——创建了不必要的数组const ids = users.map(user => {  sendEmail(user.email);  return user.id;});

// 快