16、在浏览器中运行 TypeScript 的全面指南

在浏览器中运行 TypeScript 的全面指南

1. 性能考量：重排与帧率

在浏览器中运行 TypeScript 代码时，重排（reflow）操作对性能有着显著影响。通过一个简单的测试，我们可以看到不同重排方式对帧率的影响。以下是一个示例函数：

function updateSizes() {
    const imageHeight = 100;
    const containerHeight = 200;
    return {
        'imageHeight': imageHeight,
        'containerHeight': containerHeight
    };
}
const result = updateSizes();

通过每 200 毫秒循环运行一次这些示例，可以进行基本测试。测试发现，多次重排的第一个版本将刷新率降低到每秒 53 帧，而第二个版本保持每秒 57 帧（在测试代码的计算机上，静态网页的渲染帧率为每秒 59 帧）。

只有在做出更改后需要获取测量值的情况下，才不得不使用多次重排。例如，在更改元素内容后获取其宽度，然后使用该宽度重新定位元素，这就需要进行重排。不过，我们可以精心规划操作，将重排的总数降至最低。

在衡量基于浏览器的程序时，每秒帧数（FPS）是衡量 Web 应用程序响应能力的一个很好的指标。这个指标可以在浏览器工具中获取。

2. 浏览器的关键组件

在 TypeScript 中，Web 浏览器的 JavaScript 解释器以及网络和存