Почему полирайф Array.prototype.find () медленнее, чем реализация ES6? - PullRequest
Новая
       23

Почему полирайф Array.prototype.find () медленнее, чем реализация ES6?

0 голосов
/ 05 апреля 2019

У меня сложилось впечатление, что большинство функций ES6 были просто синтаксическим сахаром.Однако, когда я сравниваю поиск полифилов на MDN с обычной реализацией 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');

1 Ответ

3 голосов
/ 05 апреля 2019

Нативная версия может использовать преимущества внутренних оптимизаций и ярлыков, если они не наблюдаются извне. Он также может быть предварительно оптимизирован и сохранен как минимум в виде байт-кода, если не скомпилирован машинный код. (Зависит от движка JavaScript.)

Напротив, polyfill - это очень педантичный рендеринг именно того, что говорит спецификация, и если вы не запускаете его более 5-10k или около того раз в узком цикле, вряд ли он будет выбран для агрессивной оптимизации двигатель.

Забавно, ваш цикл настроен на запуск 10k раз, и поэтому вполне может остановиться как раз перед тем, как двигатель его оптимизирует. Или двигатель может оптимизировать его на полпути через & mdash; дальнейшая задержка результата. Например, для меня следующий запуск полифилла выполняется ~ 6 мс в первый раз, но ~ 1.1 мс во второй и третий раз (V8 v7.3 в Chrome v73). Таким образом, очевидно, что он оптимизируется во время первого запуска (что, вероятно, замедляет замедление, но очевидно ускоряет последующие). 

// 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();
...