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

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

1. 性能考量与回流优化

在浏览器中运行TypeScript代码时，性能是一个关键因素。以如下代码为例：

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

通过每200ms循环运行一次这两个示例进行基本测试。尽管两者差异不大，但多次回流的第一个版本将刷新率降低到每秒53帧，而第二个版本保持每秒57帧（在测试此代码的计算机上，静态网页的渲染速度为每秒59帧）。

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

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

2. 浏览器的有趣组件

2.1 JavaScript解释器

JavaScript解释器（也称为JavaScript引擎）承担着大量工作。它不仅要解析和执行JavaScript程序，还要管理对象和内存、处理事件循环，并处理与存储、网络和传感器等API的交互。

在浏览器中进行JavaScript编程既有趣又有时令人沮丧，因为会遇到许多不同的JavaScript解释器。在极少数情况下，甚至可能没有解释器，导致