Question

考虑一个作用于我传递的复杂对象的一个元素上的函数。我可以这样写：

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

或

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

如果我可以选择的话，将对象的单个元素传递给函数与传递整个对象并取出所需的片段相比，对性能有什么好处？

即致电更有效：

 foo(object);

并传递让foo处理的整个对象，或者

 foo(object.item);

仅通过一项？

更新：在注释到达之前，似乎找不到我所使用的术语是Javascript是 pass-by-reference 还是 pass-by-value 。

由于对象是通过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％的情况下，这都不值得担心。代码的可读性更为重要。

将复杂对象传递给javsacript函数与单个var的性能差异？

1 个答案: