TypeScript 代码性能分析：在实践中寻找瓶颈

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

TypeScript 代码性能分析：在实践中寻找瓶颈

当您的 TypeScript 项目开始变慢，用户抱怨延迟时，就该进行性能分析了。性能分析不仅仅是“看看哪里慢”，而是一种系统性的方法，用于识别代码性能中的瓶颈。在本文中，我们将通过实际示例和工具，剖析 TypeScript 代码性能分析的实用方法。

为什么要对 TypeScript 代码进行性能分析？

TypeScript 编译为 JavaScript，因此 JS 固有的所有性能问题都会延续到 TS 中。然而，TypeScript 也带来了自身的细微差别：类型、装饰器、泛型可能会产生意想不到的开销。性能分析有助于回答以下问题：

哪个函数执行时间最长？
哪里发生了内存泄漏？
为什么动画在 60fps 时卡顿？
哪个算法需要优化？

TypeScript 性能分析工具

Chrome DevTools（用于浏览器端代码）

这是前端最强大的工具。打开 Performance 选项卡，点击 Record，执行操作，然后停止录制。您将看到 flamegraph——函数调用及其执行时间的可视化图表。

// 用于性能分析的慢速代码示例function heavyCalculation(iterations: number): number {    let result = 0;    for (let i = 0; i < iterations; i++) {        result += Math.sqrt(i) * Math.sin(i);    }    return result;}

// 在浏览器控制台中运行，然后进行性能分析heavyCalculation(1000000);

Node.js — 内置分析器

对于服务器端代码，使用 --inspect 标志和 Chrome DevTools，或使用内置的 --prof 来生成日志。

// server.tsimport express from 'express';

const app = express();

app.get('/heavy', (req, res) => {    const data = processData(10000);    res.json({ result: data });});

function processData(size: number): number[] {    const arr: number[] = [];    for (let i = 0; i < size; i++) {        arr.push(i * Math.random());    }    return arr.sort((a, b) => a - b);}

app.listen(3000);// 启动命令: node --prof dist/server.js

Benchmark.js 用于精确测量

当需要比较两种实现时，请使用 benchmark 库。

import Benchmark from 'benchmark';

const suite = new Benchmark.Suite();

// 慢速版本function slowSearch(arr: number[], target: number): boolean {    for (let i = 0; i < arr.length; i++) {        if (arr[i] === target) return true;    }    return false;}

// 使用 Set 的快速版本function fastSearch(arr: number[], target: number): boolean {    const set = new Set(arr);    return set.has(target);}

const testArray = Array.from({ length: 10000 }, (_, i) => i);

suite  .add('slowSearch', () => slowSearch(testArray, 9999))  .add('fastSearch', () => fastSearch(testArray, 9999))  .on('cycle', (event: any) => console.log(String(event.target)))  .on('complete', function(this: any) {    console.log('Fastest is ' + this.filter('fastest').map('name'));  })  .run({ async: true });

寻找瓶颈的实践示例

示例 1：通过闭包导致的内存泄漏

React 应用中的一个典型问题——闭包持有对大对象的引用。

// 有问题的代码function createHeavyComponent() {    const hugeData = new Array(1000000).fill('data');        return {        getData: () => hugeData, // 闭包持有 hugeData        updateData: (newData: string) => {            // 发生了修改，但引用仍然存在            hugeData.push(newData);        }    };}

const component = createHeavyComponent();// 只要 component 存在，hugeData 就不会被 GC 回收