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

Question

Рассмотрим функцию, которая действует на один элемент сложного объекта, который я передаю.Я могу записать это как:

function foo(object) {
  bar(object.item)
}

или

function foo(item) {
  bar(item);
}

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

Т.е. эффективнее ли вызывать:

 foo(object);

и передавать по всему объекту пусть foo имеет дело, или

 foo(object.item);

, который пропускает только один элемент?

---

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

Поскольку объекты передаются по ссылке в Javascript (с некоторыми важными оговорками), не должно иметь значения, насколько велик объект, который я передаю.

Интересное чтение:

https://medium.freecodecamp.org/understanding-by-reference-vs-by-value-d49139beb1c4

Answer 1

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

(() => {
  const obj = { foo: 'bar' };

  const t0 = performance.now();
  for (let i = 0; i < 1e9; i++) {
    obj.foo;
  }
  const t1 = performance.now();

  const { foo } = obj;
  for (let i = 0; i < 1e9; i++) {
    foo;
  }
  const t2 = performance.now();
  console.log('Object property access: ' + (t1 - t0));
  console.log('Variable access: ' + (t2 - t1));
})();

Разница крошечная, но она есть.Если у вас есть obj.prop, интерпретатор сначала должен посмотреть, на что ссылается obj, а затем он должен найти свойство prop в obj, чтобы получить значение.Таким образом, имеет смысл, что немного проще, когда искомое значение уже находится в отдельной переменной - все, что для этого нужно - интерпретатор ищет эту переменную.

Но,для примера, который вы упомянули, независимо от того, что , вы будете выполнять поиск одного объекта и поиск простого значения:

foo(object); // 1 variable lookup
function foo(object) {
  bar(object.item) // 1 object property lookup
}

// vs

foo(object.item); // 1 object property lookup
function foo(item) {
  bar(item); // 1 variable lookup
}

Было бы иначе, если бы foo использовал.item свойство более одного раза .Например, если бы foo имел:

foo(object); // 1 variable lookup
function foo(object) {
  bar(object.item) // 1 object property lookup
  baz(object.item) // 1 object property lookup
}

, что потребовало бы двух поиска свойств объекта, что означает (было бы немного более эффективно) пропускать только item

Все это говорит о том, что разница действительно крошечная .Как вы можете видеть из фрагмента, для надежного просмотра разницы требуется один миллиард итераций (по крайней мере, на моей машине), и даже в этом случае улучшение составляет всего ~ 5-10% или меньше, по крайней мередля меня на Chrome.Это не стоит беспокоиться в 99% случаев.Читаемость кода важнее.