Как улучшить производительность оператора спреда в JS

JavaScript ECMAScript 6

Автор: Дмитрий Павлютин Переводчик: Front-end Xiaozhi Источник: дмитрипавлютин.

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

В этой статье в основном объясняется, как повысить производительность операции расширения.Перед этим давайте кратко поговорим о принципе работы операции расширения в массиве.

оператор распространения или три точки, принимает массив массивов или обычно итерируемый[... arrayOrIterable]и разложить элементы массива и построить новый массив, используя эти разложенные части.

Оператор спреда можно разместить в любом месте массива:

const numbers = [1, 2, 3];
[0, ...numbers];    // => [0, 1, 2, 3]
[0, ...numbers, 4]; // => [0, 1, 2, 3, 4]
[...numbers, 4];    // => [1, 2, 3, 4]

Теперь интересный вопрос, улучшает ли производительность размещение оператора спреда в массиве?

1. Добавить к функциям головы и хвоста

Прежде чем мы начнем сравнивать производительность, определим две функции.

Первая функция:appendToTail():

function appendToTail(item, array) {
  return [...array, item];
}

const numbers = [1, 2, 3];
appendToTail(10, numbers); // => [1, 2, 3, 10]

appendToTail()Функция заключается в основном вitemВставить в конец массива.

вторая функцияappendToHead():

function appendToHead(item, array) {
  return [item, ...array];
}

const numbers = [1, 2, 3];
appendToHead(10, numbers); // => [10, 1, 2, 3]

appendToHead()это чистая функция, которая возвращает новый массив через[item，... array]Сан-операция будетitemПоместите его после переданного массива.

На первый взгляд нет оснований думать, что выполнение этих функций будет другим, однако факты перевешивают медведей, давайте разберемся.

2. Тест производительности

Запуск на ноутбуке MacBook Pro со следующими 3 браузерами[... array，item]а также[item，... array]Давайте посмотрим на соответствующую производительность:

  • Chrome 76
  • Firefox 68
  • Safari 12.1

Результаты теста:

Как видно выше, вFirefoxа такжеSafariв браузере[... array，item]а также[item，... array]производительность в принципе одинаковая.

Однако в Chrome[... array，item]коэффициент скорости выполнения[item，... array]вдвое быстрее. Этот результат очень полезен для нас.

быть вChromeЧтобы повысить производительность оператора распространения, вам нужно всего лишь поместить операцию расширения в начало массива.

const result = [...array, item];

Но почему, почему это происходит?

3. Быстрая оптимизация

Запустите V8 версии 7.2 (поддержка выполнения JS в Chrome), можно оптимизировать для новых операторов расширения:быстрая оптимизация пути.

Вкратце это работает так:

Без этой оптимизации, когда движок сталкивается с оператором раскрутки[...iterable, item], который вызываетiterableитератор объекта (iterator.next()) метод. На каждой итерации память окончательно возвращенного массива увеличивается и к нему добавляется результат итерации.

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

Быстрая оптимизация пропускает создание повторяющихся объектов и выделяет память только один раз для результата, что приводит к повышению производительности.

4. Поддержка структуры данных

Быстрая оптимизация работает со следующими стандартными структурами данных JS.

array

const numbers = [1, 2, 3, 4];

[...numbers, 5]; // => [1, 2, 3, 4, 5]

string

const message = 'Hi';

[...message, '!']; // => ['H', 'i', '!']

set

const colors = new Set(['blue', 'white']);

[...colors, 'green'];          // => ['blue', 'white', 'green']
[...colors.values(), 'green']; // => ['blue', 'white', 'green']
[...colors.keys(), 'green'];   // => ['blue', 'white', 'green']

map

оmap, поддерживает толькоmap.keys()а такжеmap.values()метод

const names = new Map([[5, 'five'], [7, 'seven']]);

[...names.values(), 'ten']; // => ['five', 'seven', 'ten']
[...names.keys(), 10];      // => [5, 7, 10]

Суммировать

Когда расширенный массив находится в начале литерала массива, мы можем передатьбыстрая оптимизация путиПолучите прирост производительности. Эта оптимизация доступна в движке V8 v7.2 (доступно в Chrome v72 и NodeJS v12).

пройти черезбыстрая оптимизация пути,[... array，item]выполняется как минимум быстрее, чем[item，... array]вдвое быстрее.

Обратите внимание, что, хотя оптимизация быстрого пути действительно полезна, в большинстве случаев нет необходимости принудительно выполнять оптимизацию, поскольку конечный пользователь, скорее всего, не заметит разницы, конечно, если мы имеем дело с большими массивами, некоторые оптимизации возможны.

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:Рисовое путешествие avlutin.com/JavaScript-…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории