Question

我问自己，如果在某个时刻发生了 ES2017 + 和编译 TypeScript 的任何性能差异？

这个想法冒出来了，同时考虑了生成的JS，这是完全不同的（尽管TypeScript的JS似乎更直接）。

ES2017代码

class TestClass {
  constructor(valueA) {
    this.valueA = valueA;
  }

  getValueA() {
   return this.valueA; 
  }
}

变为

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var TestClass = function () {
  function TestClass(valueA) {
    _classCallCheck(this, TestClass);

    this.valueA = valueA;
  }

  _createClass(TestClass, [{
    key: "getValueA",
    value: function getValueA() {
      return this.valueA;
    }
  }]);

  return TestClass;
}();

TypeScript代码

class TestClass {
  valueA: any;
  constructor(valueA) {
    this.valueA = valueA;
  }

  getValueA() {
   return this.valueA; 
  }
}

变为

var TestClass = /** @class */ (function () {
    function TestClass(valueA) {
        this.valueA = valueA;
    }
    TestClass.prototype.getValueA = function () {
        return this.valueA;
    };
    return TestClass;
}());

Answer 1

当然，您引用的两个输出之间存在性能差异，尽管这些性能差异不太重要。 Babel的输出使用多个函数调用，检查各种事物等.TypeScript的输出没有。

值得注意的是，原因 Babel所做的就是尽力确保其输出的代码的正确性。 ES2015的class要求检查，例如要求通过new或super调用构造函数; TypeScript的转换代码不会这样做。

Babel的某些变换具有“松散”模式，可以输出技术上不正确的代码，但会产生更快的代码，并且在大多数情况下会产生与正确代码相同的最终结果。例如，如果您对该代码使用es2015-loose而不是es2015，you get this（我已经完成了一些自动换行）：

"use strict";

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var TestClass = function () {
  function TestClass(valueA) {
    _classCallCheck(this, TestClass);

    this.valueA = valueA;
  }

  TestClass.prototype.getValueA = function getValueA() {
    return this.valueA;
  };

  return TestClass;
}();

...这与TypeScript输出更相似。

已编译的ES2017和已编译的TypeScript之间的性能差异？

1 个答案: