面试题：TypeScript装饰器性能优化之底层原理及极致优化

1. TypeScript 装饰器编译和运行时底层机制

编译时机制：
- 语法解析：TypeScript 编译器在解析代码时，识别装饰器语法。装饰器本质上是一个函数，它以类、方法、属性或参数为目标，并在编译时对这些目标进行元数据标注。例如，@myDecorator 这种形式，编译器会识别 myDecorator 函数，并将其应用到相应的目标上。
- 元数据生成：编译器会生成额外的元数据，这些元数据与被装饰的目标相关联。在运行时，可以通过反射机制访问这些元数据。比如，使用 Reflect API 可以获取类或方法上的装饰器添加的元数据。
运行时机制：
- 装饰器执行：当代码运行到包含装饰器的部分时，装饰器函数会按照定义的顺序执行。对于类装饰器，它在类定义阶段执行；方法装饰器在类实例化之前，方法定义时执行；属性装饰器在类实例化之前，属性定义时执行；参数装饰器在函数调用时，参数解析之后执行。
- 元数据访问与使用：运行时通过反射（如 Reflect.getMetadata）来访问编译时生成的元数据，这些元数据可以用于依赖注入、权限控制等各种逻辑。例如，在依赖注入场景中，通过装饰器添加的元数据可以帮助框架识别需要注入的依赖。

2. 性能优化策略

减少不必要的装饰器：
- 原理：每个装饰器都会带来一定的性能开销，无论是在编译时的元数据生成，还是运行时的执行。减少不必要的装饰器可以直接降低这种开销。
- 示例：如果某些装饰器只是用于开发环境的调试（如打印日志），在生产环境中可以通过条件编译移除这些装饰器。例如，定义一个全局变量 isProduction，在开发环境设为 false，生产环境设为 true。

const isProduction = true;
function debugLog(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    if (!isProduction) {
        const originalMethod = descriptor.value;
        descriptor.value = function (...args: any[]) {
            console.log(`Calling ${propertyKey} with args:`, args);
            const result = originalMethod.apply(this, args);
            console.log(`${propertyKey} returned:`, result);
            return result;
        };
    }
    return descriptor;
}

缓存装饰器结果：
- 原理：对于一些计算成本较高的装饰器，比如涉及复杂的元数据计算或外部资源访问，可以缓存其结果。这样在后续相同目标再次调用时，直接使用缓存结果，避免重复计算。
- 示例：假设一个装饰器用于计算某个类方法的调用频率，并且计算逻辑较为复杂。

const callFrequencyCache: Map<Function, number> = new Map();
function callFrequency(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;
    descriptor.value = function (...args: any[]) {
        let frequency = callFrequencyCache.get(originalMethod);
        if (!frequency) {
            // 复杂的计算逻辑
            frequency = 1;
            // 模拟复杂计算
            for (let i = 0; i < 1000000; i++) {
                // 做点计算
            }
            callFrequencyCache.set(originalMethod, frequency);
        } else {
            frequency++;
            callFrequencyCache.set(originalMethod, frequency);
        }
        console.log(`${propertyKey} has been called ${frequency} times`);
        return originalMethod.apply(this, args);
    };
    return descriptor;
}

优化装饰器逻辑：
- 原理：确保装饰器内部逻辑简洁高效，避免复杂的循环、递归或不必要的函数调用。装饰器逻辑越简单，执行速度越快，对整体性能影响越小。
- 示例：避免在装饰器中进行大量的字符串拼接或复杂的对象序列化操作。如果必须进行这些操作，可以将其提取到单独的函数中，并在必要时进行缓存。

3. 性能指标变化示例

假设我们有一个简单的类，其中一个方法使用装饰器。

优化前：
- 响应时间：假设在高并发场景下，由于装饰器中存在复杂的计算逻辑，每次方法调用时，装饰器执行时间为 100ms，方法本身执行时间为 50ms。那么每次调用的总响应时间约为 150ms。
- 资源占用：复杂的计算逻辑可能导致内存占用增加，例如额外占用 10MB 的内存用于中间计算结果存储。
优化后：
- 响应时间：通过缓存装饰器结果，装饰器执行时间减少到 10ms（缓存命中时），方法本身执行时间不变仍为 50ms。总响应时间约为 60ms，响应时间大幅缩短，提升了系统在高并发下的处理能力。
- 资源占用：由于避免了复杂计算导致的中间结果存储，内存占用减少到原来的一半，即 5MB，降低了系统资源消耗，更适应低延迟、高并发的生产环境。

星途面试题库

面试题：TypeScript装饰器性能优化之底层原理及极致优化

知识考点

面试题答案

1. TypeScript 装饰器编译和运行时底层机制

2. 性能优化策略

3. 性能指标变化示例