У вас включен AdBlock или иной блокировщик рекламы.

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

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

Может ли производительность JSON.parse() быть улучшена?

JSON.parse - это медленный способ создания копии объекта. Но можем ли мы на самом деле улучшить производительность нашего кода?

Проблема

Создание копии объекта является обычной практикой в ​​JS. Вы, вероятно, сделали это при создании редукторов в Redux или где-либо еще. В настоящее время наиболее используемый синтаксис для этого распространен:

const objA = { name: 'Jack', surname: 'Sparrow' };
const objB = { ...objA };

Использование на практике:

function dataReducer(state = { name: '', surname: '' }, action) {
  switch (action.type) {
    case ACTION_TYPES.SET_NAME:
      return {
        ...state,
        name: action.name,
      };
    case ACTION_TYPES.SET_SURNAME:
      return {
        ...state,
        surname: action.surname,
      };
    default:
      return state;
  }
}

Но это можно сделать разными способами (не считая разных библиотек)

const objC = Object.assign({}, objA);
const objD = JSON.parse(JSON.stringify(objA));

Если вы проверите, сколько времени потребуется, чтобы скопировать объект, используя эти методы, вы получите результаты, подобные 1⁰⁹ (каждый раз, когда мы копируем objA):

test with spread: 14 ms. 
test with Object.assign: 36 ms. 
test with JSON.parse: 702 ms.

Очевидно JSON.parse, самый медленный из них, и с некоторым отрывом. Почему вы даже должны рассмотреть возможность использования JSON.parse вместо распространения (...)?

Не очень очевидное поведение движка V8

Все сводится к тому, как V8 оптимизирует функции. Каждый раз, когда функция выполняется, V8 сравнивает переданный ей объект IC (Inline Cache), и если Shape объект хранится внутри одного из «кэшей», тогда V8 может следовать «быстрому пути».

Так что если у вас есть такая функция

function test(obj) {
  let result = '';
  for (let i = 0; i < N; i += 1) {
    result += obj.a + obj.b;
  }
  return result;
}

Вы можете запустить его с несколькими объектами одинаковой формы и иметь отличную производительность

const jack = { name: 'Jack', surname: 'Sparrow' };
const frodo = { name: 'Frodo', surname: 'Baggins' };
const charles = { name: 'Charles', surname: 'Xavier' };
test(jack);
test(frodo);
test(charles);

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

Давайте проверим, какие формы создаются при использовании каждого из 3 методов копирования:

//testSpread.js
const objA = { name: 'Jack', surname: 'Sparrow' };
const objB = { ...objA };
console.log(%HaveSameMap(objA, objB)); // false

//testAssign.js
const objA = { name: 'Jack', surname: 'Sparrow' };
const objC = Object.assign({}, objA);
console.log(%HaveSameMap(objA, objC)); // false

//testParse.js
const objA = { name: 'Jack', surname: 'Sparrow' };
const objD = JSON.parse(JSON.stringify(objA));
console.log(%HaveSameMap(objA, objD)); // true

Как видите, JSON.parse(JSON.stringify(objA)) создайте только объект, который имеет ту же форму, что и objA.

Стоимость немономорфных функций

Вот наша функция

function test(obj) {
  let result = '';
  // Any costly operation
  for (let i = 0; i < N; i += 1) {
    result += obj.name + obj.surname;
  }
  return result;
}

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

const jack = { name: 'Jack', surname: 'Sparrow' };
const frodo = { name: 'Frodo', surname: 'Baggins' };
const charles = { name: 'Charles', surname: 'Xavier' };
const legolas = { name: 'Legolas', surname: 'Thranduilion' };
const indiana = { name: 'Indiana', surname: 'Jones' };

for (let i = 0; i < N; i += 1) {
  test(JSON.parse(JSON.stringify(jack)));
  test(JSON.parse(JSON.stringify(frodo)));
  test(JSON.parse(JSON.stringify(charles)));
  test(JSON.parse(JSON.stringify(legolas)));
  test(JSON.parse(JSON.stringify(indiana)));
}

for (let i = 0; i < N; i += 1) {
  test({ ...jack });
  test({ ...frodo });
  test({ ...charles });
  test({ ...legolas });
  test({ ...indiana });
}

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

Если вы установите N на 10000 и запустить этот цикл, то результат может вас удивить:

test with PARSE: 2522 ms. 
test with spread: 10046 ms.

Какая? spread в 4 раза медленнее, чем JSON.parse? Если это странно, вспомни, что я говорил раньше

V8 собирается пометить эту функцию как мономорфную и оптимизировать ее код

Поскольку тест не простая функция (код простой, но дорогой в выполнении), начальная стоимость вызова JSON.stringify и JSON.parse намного ниже, чем запуск этой функции без оптимизации.

Во втором тестовом прогоне эта функция становится мегаморфной, и V8 прекращает ее оптимизацию. Вы можете проверить этот репозиторий, чтобы попробовать ее на своей машине.

Вывод

Важно понимать, как работает оптимизация JS при разработке сложных методов вычисления в JavaScript. Иногда даже простая вещь может привести к снижению производительности, и вы можете потратить дни, пытаясь выяснить, что происходит.

Я не говорю о замене всех операторов распространения на JSON.parse, это снизит производительность вашего приложения. Я хочу сказать, что иногда снижение производительности одной вещи может значительно улучшить производительность другой.

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

Источник:

#JavaScript
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоеденяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать