javascript - JavaScript 引擎会优化闭包中定义的常量吗？

Question

假设我有一个函数可以访问常量(从未变异)变量(例如查找表或数组)。该常量不会在函数作用域之外的任何地方被引用。 我的直觉告诉我，我应该在函数作用域之外定义这个常量(下面的选项 B)，以避免在每次函数调用时(重新)创建它，但这真的是现代 Javascript 引擎的工作方式吗？我想现代引擎可以看到该常量永远不会被修改，因此只需创建并缓存它一次(有一个术语吗？)。浏览器是否以相同的方式缓存闭包中定义的函数？

简单地在函数内紧邻其访问位置(下面的选项 A)定义常量是否会带来不可忽略的性能损失？对于更复杂的对象，情况是否有所不同？

// Option A:
function inlinedAccess(key) {
  const inlinedLookupTable = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
  }

  return 'result: ' + inlinedLookupTable[key]
}

// Option B:
const CONSTANT_TABLE = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
}
function constantAccess(key) {
  return 'result: ' + CONSTANT_TABLE[key]
}

实践测试

我创建了一个 jsperf test 比较了不同的方法:

1. 对象 - 内联(选项 A)
2. 对象 - 常量(选项 B)

@jmrk 建议的其他变体:

map - 内联

map - 常量

开关 - 内联值

初步发现(在我的机器上，请随意尝试一下):

• Chrome v77:(4) 是迄今为止最快的，其次是 (2)
• Safari v12.1:(4) 比 (2) 稍快，跨浏览器性能最低
• Firefox v69:(5) 最快，(3) 稍稍落后

Answer 1

V8 开发人员在这里。你的直觉是正确的。

TL;DR:inlinedAccess 每次都会创建一个新对象。 constantAccess 更高效，因为它避免了在每次调用时重新创建对象。为了获得更好的性能，请使用Map。

“快速测试”对两个函数产生相同的时序这一事实说明了微基准测试是多么容易产生误导;-)

• 创建像示例中的对象这样的对象非常快，因此影响很难衡量。您可以通过提高重复对象创建的成本来放大其影响，例如将一个属性替换为 b: new Array(100),。
• 'result: ' + ... 中的数字到字符串转换和随后的字符串连接对总体时间贡献很大；您可以删除它以获得更清晰的信号。
• 对于小型基准测试，您必须小心，不要让编译器优化掉所有内容。将结果分配给全局变量就可以了。
• 无论您总是查找相同的属性还是不同的属性，这也会产生巨大的差异。 JavaScript 中的对象查找并不完全是一个简单(==快速)的操作；当给定站点上始终具有相同的属性(和相同的对象形状)时，V8 具有非常快速的优化/缓存策略，但对于不同的属性(或对象形状)，它必须执行成本更高的查找。
• Map 不同键的查找比对象属性查找更快。使用对象作为 map 已经是 2010 年的事了，现代 JavaScript 已经有了合适的 Map，所以使用它们吧! :-)
• Array 元素查找速度更快，但当然，您只能在键为整数时使用它们。
• 当可能查找的键的数量很少时，switch 语句很难被击败。但它们不能很好地扩展到大量键。

让我们将所有这些想法写入代码中:

function inlinedAccess(key) {
  const inlinedLookupTable = {
    a: 1,
    b: new Array(100),
    c: 3,
    d: 4,
  }
  return inlinedLookupTable[key];
}

const CONSTANT_TABLE = {
  a: 1,
  b: new Array(100),
  c: 3,
  d: 4,
}
function constantAccess(key) {
  return CONSTANT_TABLE[key];
}

const LOOKUP_MAP = new Map([
  ["a", 1],
  ["b", new Array(100)],
  ["c", 3],
  ["d", 4]
]);
function mapAccess(key) {
  return LOOKUP_MAP.get(key);
}

const ARRAY_TABLE = ["a", "b", "c", "d"]
function integerAccess(key) {
  return ARRAY_TABLE[key];
}

function switchAccess(key) {
  switch (key) {
    case "a": return 1;
    case "b": return new Array(100);
    case "c": return 3;
    case "d": return 4;
  }
}

const kCount = 10000000;
let result = null;
let t1 = Date.now();
for (let i = 0; i < kCount; i++) {
  result = inlinedAccess("a");
  result = inlinedAccess("d");
}
let t2 = Date.now();
for (let i = 0; i < kCount; i++) {
  result = constantAccess("a");
  result = constantAccess("d");
}
let t3 = Date.now();
for (let i = 0; i < kCount; i++) {
  result = mapAccess("a");
  result = mapAccess("d");
}
let t4 = Date.now();
for (let i = 0; i < kCount; i++) {
  result = integerAccess(0);
  result = integerAccess(3);
}
let t5 = Date.now();
for (let i = 0; i < kCount; i++) {
  result = switchAccess("a");
  result = switchAccess("d");
}
let t6 = Date.now();
console.log("inlinedAccess: " + (t2 - t1));
console.log("constantAccess: " + (t3 - t2));
console.log("mapAccess: " + (t4 - t3));
console.log("integerAccess: " + (t5 - t4));
console.log("switchAccess: " + (t6 - t5));

我得到以下结果:

inlinedAccess: 1613
constantAccess: 194
mapAccess: 95
integerAccess: 15
switchAccess: 9

综上所述:这些数字是“10M 次查找的毫秒数”。在现实应用程序中，差异可能太小而无关紧要，因此您可以编写最具可读性/可维护性等的任何代码。例如，如果您只进行 100K 次查找，则结果为:

inlinedAccess: 31
constantAccess: 6
mapAccess: 6
integerAccess: 5
switchAccess: 4

<小时/>

顺便说一下，这种情况的一个常见变体是创建/调用函数。这:

function singleton_callback(...) { ... }
function efficient(...) {
  return singleton_callback(...);
}

比这更有效:

function wasteful(...) {
  function new_callback_every_time(...) { ... }
  return new_callback_every_time(...);
}

同样，这个:

function singleton_method(args) { ... }
function EfficientObjectConstructor(param) {
  this.___ = param;
  this.method = singleton_method;
}

比这更有效:

function WastefulObjectConstructor(param) {
  this.___ = param;
  this.method = function(...) { 
    // Allocates a new function every time.
  };
}

(当然，通常的做法是Constructor.prototype.method = function(...) {...}，这也避免了重复的函数创建。或者，现在，你可以只使用classes。)