javascript - 当我们改变执行顺序时，performance.now() 返回不同的值

Question

我只是想看看使用 || (双管道、短路运算符，应该更快)而不是 | 的性能差异。

但结果并没有体现出实际的性能改进。如果我们只是重新排序下面的代码..首先使用 | 执行控制台日志，那么它将比其他代码显示更多的时间。

1. 如何使用此方式或任何其他方式查看性能差异？另外，

2. 有人可以解释一下为什么我们更改顺序时会出现差异吗？

   如果performance.now();的行为像这样，我认为使用它没有任何意义。

请帮忙。谢谢:)

var t3 = performance.now();
console.log(1 | (1),
  1 || (0),
  1 || (-1),
  1 || ("a string"),
  1 || (""),
  1 || (null),
  1 || (undefined),
  1 || (console.log(3)),
  1 || (Infinity))
var t4 = performance.now();
console.log("Call with (double) '||' took " + (t4 - t3) + " milliseconds.");

var t0 = performance.now();
console.log(1 | (1),
  1 | (0),
  1 | (-1),
  1 | ("a string"),
  1 | (""),
  1 | (null),
  1 | (undefined),
  1 | (console.log(3)),
  1 | (Infinity))
var t1 = performance.now();
console.log("Call with single | took " + (t1 - t0) + " milliseconds.");

Answer 1

1. How can I see the performance difference using this or any other way?
2. Can somebody explain why there is difference when we change the order?

1. 进行许多测试。单个测试(尤其是那些花费很少时间的测试)极有可能受到浏览器或操作系统干扰，它们可以随时决定暂停执行、执行其他操作，然后稍后再返回。
2. 温暖环境。几乎所有进行输入/输出的内容(例如 console.log)都需要初始化，这将在第一次使用时完成，这很容易将测量的性能破坏几个数量级。<
3. 删除所有不严格属于您的测试的内容。如果您想比较 | 与 ||，则不要在正在计时的 block 中包含 console.log。

一些演示:

运行以下代码几次。观察一下:

1. 通常(但并非总是)第一个需要更长的时间。这就是初始化。
2. 有时，其中一个所花费的时间是另一个的数倍。这就是干扰。

var t3 = performance.now();
console.log("herp");
var t4 = performance.now();

var t0 = performance.now();
console.log("derp");
var t1 = performance.now();

console.log("Call with herp took " + (t4 - t3) + " milliseconds.");
console.log("Call with derp took " + (t1 - t0) + " milliseconds.");

还要观察到 I/O 对性能有可怕的影响:(您需要向下滚动)

var discard = function(){}; // just discards everything

var t3 = performance.now();
for(var i = 0; i < 1000; ++i)
{
    discard("");
}
var t4 = performance.now();

var t0 = performance.now();
for(var i = 0; i < 1000; ++i)
{
    console.log("");
}
var t1 = performance.now();

console.log("discard() took " + (t4 - t3) + " milliseconds.");
console.log("console.log() took " + (t1 - t0) + " milliseconds.");

考虑到所有这些，让我们编写一个测试用例来测试您的操作:

var discard = function(){};

for(var i = 0; i < 1000; ++i)
{
    discard(1 | (1),
      1 || (0),
      1 || (-1),
      1 || ("a string"),
      1 || (""),
      1 || (null),
      1 || (undefined),
      1 || (console.log(3)),
      1 || (Infinity));
}
for(var i = 0; i < 1000; ++i)
{
    discard(1 | (1),
      1 | (0),
      1 | (-1),
      1 | ("a string"),
      1 | (""),
      1 | (null),
      1 | (undefined),
      1 | (console.log(3)),
      1 | (Infinity));
}

var t3 = performance.now();
for(var i = 0; i < 1000; ++i)
{
    discard(1 | (1),
      1 || (0),
      1 || (-1),
      1 || ("a string"),
      1 || (""),
      1 || (null),
      1 || (undefined),
      1 || (console.log(3)),
      1 || (Infinity));
}
var t4 = performance.now();

var t0 = performance.now();
for(var i = 0; i < 1000; ++i)
{
    discard(1 | (1),
      1 | (0),
      1 | (-1),
      1 | ("a string"),
      1 | (""),
      1 | (null),
      1 | (undefined),
      1 | (console.log(3)),
      1 | (Infinity));
}
var t1 = performance.now();

console.log("Call with (double) '||' took " + (t4 - t3) + " milliseconds.");
console.log("Call with single | took " + (t1 - t0) + " milliseconds.");

请注意，几乎所有 | 案例完成所需的时间仍然来自 console.log，仅证明 上的短路|| 确实有效。当然，这对于实际涉及 I/O 的 | 和 || 操作来说是准确的。但是，如果您忽略这一点，结果会再次非常接近:

(请注意，我将 for 循环增加到 1000 万次，证明 console.log 实际需要多少时间!)

var discard = function(){};

for(var i = 0; i < 10000000; ++i)
{
    discard(1 | (1),
      1 || (0),
      1 || (-1),
      1 || ("a string"),
      1 || (""),
      1 || (null),
      1 || (undefined),
      1 || (Infinity));
}
for(var i = 0; i < 10000000; ++i)
{
    discard(1 | (1),
      1 | (0),
      1 | (-1),
      1 | ("a string"),
      1 | (""),
      1 | (null),
      1 | (undefined),
      1 | (Infinity));
}

var t3 = performance.now();
for(var i = 0; i < 10000000; ++i)
{
    discard(1 | (1),
      1 || (0),
      1 || (-1),
      1 || ("a string"),
      1 || (""),
      1 || (null),
      1 || (undefined),
      1 || (Infinity));
}
var t4 = performance.now();

var t0 = performance.now();
for(var i = 0; i < 10000000; ++i)
{
    discard(1 | (1),
      1 | (0),
      1 | (-1),
      1 | ("a string"),
      1 | (""),
      1 | (null),
      1 | (undefined),
      1 | (Infinity));
}
var t1 = performance.now();

console.log("Call with (double) '||' took " + (t4 - t3) + " milliseconds.");
console.log("Call with single | took " + (t1 - t0) + " milliseconds.");

尽管如此，| 和 || 做的事情完全不同。不仅体现在执行上，更体现在结果上。尝试 1 || 126 与 1 | 126，或“a”|| “b” 与 “a”| “b”。