从代码实现方式优化性能

发表于 2025/03/09

作者 Leon Yi

5 分钟阅读

使用多态代替条件判断
参数传入使用平铺参数代替对象参数没有必要包裹一层对象，增加创建和 GC 开销 benchmark
高频调用函数避免使用 rest/spread 运算符,编译到 ES5 要使用循环，还要创建数组，要避免在高频场景下使用（相比正常写法相差 6 倍） benchmark，还有额外的 GC 开销
手写 map 性能不如原生 benchmark
局部化极高频变量，例如原来是 o.a.b，优化后直接访问 a benchmark
instanceof 的条件判断可以用 map 优化 ```javascript // setup.js “use strict”; var extends = (this && this.__extends) || (function () { var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || ({ __proto: [] } instanceof Array && function (d, b) { d.proto = b; }) || function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; return extendStatics(d, b); }; return function (d, b) { if (typeof b !== “function” && b !== null) throw new TypeError(“Class extends value “ + String(b) + “ is not a constructor or null”); extendStatics(d, b); function () { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (.prototype = b.prototype, new __()); }; })(); var Origin = /** @class */ (function () { function Origin() { } return Origin; }()); var Base = /** @class */ (function (_super) { __extends(Base, _super); function Base() { return _super !== null && _super.apply(this, arguments) || this; } return Base; }(Origin)); var A = /** @class */ (function (_super) { __extends(A, _super); function A() { return _super !== null && _super.apply(this, arguments) || this; } return A; }(Base)); var B = /** @class */ (function (_super) { __extends(B, _super); function B() { return _super !== null && _super.apply(this, arguments) || this; } return B; }(Base)); var C = /** @class */ (function (_super) { __extends(C, _super); function C() { return _super !== null && _super.apply(this, arguments) || this; } return C; }(Base)); var D = /** @class */ (function (_super) { __extends(D, _super); function D() { return _super !== null && _super.apply(this, arguments) || this; } return D; }(Base)); var E = /** @class */ (function (_super) { __extends(E, _super); function E() { return _super !== null && _super.apply(this, arguments) || this; } return E; }(Base)); var F = /** @class */ (function (_super) { __extends(F, _super); function F() { return _super !== null && _super.apply(this, arguments) || this; } return F; }(Base)); var list = []; for (var i = 0; i < 1000; i++) { list.push(new D()); } function a() {} function b() {} function c() {} function d() {} function e() {} function f() {} const HANDLER_BY_CONSTRUCTOR = new Map([ [A, a], [B, b], [C, c], [D, d], [E, e], [F, f] ]);

function getCommonElementCreator(element) { // 对于大多数单层继承的类，使用更快的方法 if (HANDLER_BY_CONSTRUCTOR.get(element.constructor) !== undefined) { return HANDLER_BY_CONSTRUCTOR.get(element.constructor); } // 其他情况使用循环查找 let prototype = Object.getPrototypeOf(Object.getPrototypeOf(element));

while (prototype && prototype !== Base.prototype) {
    const elementType = HANDLER_BY_CONSTRUCTOR.get(prototype.constructor);
    if (elementType !== undefined) {
        return elementType;
    }
    prototype = Object.getPrototypeOf(prototype);
}
return; }

// case 1 list.forEach(function (element) { if (element instanceof A) { a(); } else if (element instanceof B) { b(); } else if (element instanceof C) { c(); } else if (element instanceof D) { d(); } else if (element instanceof E) { e(); } else if (element instanceof F) { f(); } });

// case 2 list.forEach(function (element) { const handler = getCommonElementCreator(element);

if (handler)(
	handler()
) });

```

ES6 的迭代器经过编译性能都很差，而且 helper 函数会创建多余的数组，造成 GC 开销。

遍历数组: TS 编译的 for of 循环比 for 循环和 forEach 慢了 70% 和 50% benchmark
多元素 push 到数组: TS 编译的比 Array.prototype.push.apply 慢了 90%，即 a.push(…b) 和 Array.prototype.push.apply(a, b) 的差别。benchmark
数组拼接：[…a, …b] 比 a.concat(b) 慢了 95% benchmark
数组复制：[…a] 比 a.slice() 慢了 95% benchmark
Set 转换到 Array：TS 编译的比 Array.from 慢了 95%，即 […set] 和 Array.from(set) 的差别 benchmark
遍历 Map: forEach 比 for of 快 50% benchmark

每个源文件编译后都要加入一份 helper 函数，造成体积浪费，对 JS 引擎优化也不友好。可以开启 tsconfig 的 importHelpers 选项，将 helper 函数从每个文件中移除，放到一个单独的文件中，而且可以减少代码体积。

importHelpers 是 TypeScript 编译器的一个配置选项，用于优化生成的 JavaScript 代码。具体来说，当 TypeScript 进行某些向下兼容的操作（如类的扩展、数组或对象的展开、异步操作等）时，它会插入一些辅助函数。默认情况下，这些辅助函数会被插入到每个使用它们的文件中，这可能导致代码重复。通过启用 importHelpers 选项，这些辅助函数会被从 tslib 模块中导入，从而避免重复代码。

性能优化

本文由作者按照 CC BY 4.0 进行授权

热门标签