为什么 Array.prototype.find() polyfill 比 ES6 实现慢？

Question

我的印象是大多数 ES6 特性只是语法糖。然而，当我将 MDN 上的 find polyfill 与常规 ES6 实现进行比较时，它似乎快了一半。究竟是什么解释了这种性能差异，难道在引擎盖下不都是一样的吗？

请参考下面的代码片段获取基准：

// Find polyfill
function find(obj, predicate) {
  // 1. Let O be ? ToObject(this value).
  if (this == null) {
    throw new TypeError('"this" is null or not defined');
  }

  var o = Object(obj);

  // 2. Let len be ? ToLength(? Get(O, "length")).
  var len = o.length >>> 0;

  // 3. If IsCallable(predicate) is false, throw a TypeError exception.
  if (typeof predicate !== 'function') {
    throw new TypeError('predicate must be a function');
  }

  // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
  var thisArg = arguments[1];

  // 5. Let k be 0.
  var k = 0;

  // 6. Repeat, while k < len
  while (k < len) {
    // a. Let Pk be ! ToString(k).
    // b. Let kValue be ? Get(O, Pk).
    // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
    // d. If testResult is true, return kValue.
    var kValue = o[k];
    if (predicate.call(thisArg, kValue, k, o)) {
      return kValue;
    }
    // e. Increase k by 1.
    k++;
  }

  // 7. Return undefined.
  return undefined;
}
const testArray = ["Hello", "Hi", "Good Morning", "Good Afternoon", "Good Evening", "Good Night"];

// Polyfill benchmark
console.time('findPolyfill');
for (var i = 0; i < 10000; i++) {
  find(testArray, (item) => item === "Hello")
}
console.timeEnd('findPolyfill');

// ES6 benchmark
console.time('find ES6');
for (var i = 0; i < 10000; i++) {
  testArray.find((item) => item === "Hello");
}
console.timeEnd('find ES6');

Answer 1

本机版本可以利用内部优化和快捷方式，只要它们无法从外部观察到。如果不是编译的机器代码，它也可能被预先优化并至少存储为字节码。（取决于 JavaScript 引擎。）

相比之下，polyfill 是对规范所说的内容的非常迂腐的呈现，除非你运行它在一个紧密的循环中超过 5-10k 次左右，否则不太可能被引擎选中进行积极优化。

有趣的是，您的循环设置为运行 10k 次，因此很可能会在引擎对其进行优化之前停止。或者引擎可能会在中途优化它——进一步延迟结果。例如，对我来说，以下代码第一次在 ~6ms 内有 polyfill 运行，但第二次和第三次在 ~1.1ms 内（Chrome v73 中的 V8 v7.3）。所以很明显它在第一个运行期间得到了优化（这反过来可能会减慢运行的速度，但显然会加快后续的速度）。

// Find polyfill function find(obj, predicate) { // 1. Let O be ? ToObject(this value). if (this == null) { throw new TypeError('"this" is null or not defined'); } var o = Object(obj); // 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0; // 3. If IsCallable(predicate) is false, throw a TypeError exception. if (typeof predicate !== 'function') { throw new TypeError('predicate must be a function'); } // 4. If thisArg was supplied, let T be thisArg; else let T be undefined. var thisArg = arguments[1]; // 5. Let k be 0. var k = 0; // 6. Repeat, while k < len while (k < len) { // a. Let Pk be ! ToString(k). // b. Let kValue be ? Get(O, Pk). // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). // d. If testResult is true, return kValue. var kValue = o[k]; if (predicate.call(thisArg, kValue, k, o)) { return kValue; } // e. Increase k by 1. k++; } // 7. Return undefined. return undefined; } const testArray = ["Hello", "Hi", "Good Morning", "Good Afternoon", "Good Evening", "Good Night"]; function testPolyfill() { // Polyfill benchmark console.time('findPolyfill'); for (var i = 0; i < 10000; i++) { find(testArray, (item) => item === "Hello") } console.timeEnd('findPolyfill'); } function testNative() { // ES6 benchmark console.time('find ES6'); for (var i = 0; i < 10000; i++) { testArray.find((item) => item === "Hello"); } console.timeEnd('find ES6'); } testPolyfill(); testNative(); testPolyfill(); testNative(); testPolyfill(); testNative();

为什么 Array.prototype.find() polyfill 比 ES6 实现慢？

Why is the Array.prototype.find() polyfill slower than the ES6 implementation?

javascript

arrays

performance

v8

ecmascript-6