javascript - 在向用户显示输出的同时准确测量 Javascript 函数的性能

Question

正如您在下面的代码中看到的，当我增加字符串的大小时，它会导致 0 毫秒的差异。此外，随着字符串数量的增加，会出现不一致的情况。

我是不是做错了什么？

let stringIn = document.getElementById('str');
let button = document.querySelector('button');

button.addEventListener('click', () => {
  let t1 = performance.now();
  functionToTest(stringIn.value);
  let t2 = performance.now();
  console.log(`time taken is ${t2 - t1}`);
});

function functionToTest(str) {
  let total = 0;
  for(i of str) {
   total ++;
  }
  return total;
}

<input id="str">
<button type="button">Test string</button>

我尝试使用 await也一样，但结果是一样的(见下面的代码片段)。包含以下代码的函数是 async :

let stringArr = this.inputString.split(' ');
let longest = '';
const t1 = performance.now();
let length = await new Promise(resolve => {
  stringArr.map((item, i) => {
    longest = longest.length < item.length ? longest : item;
    i === stringArr.length - 1 ? resolve(longest) : '';
  });
});
const diff = performance.now() - t1;
console.log(diff);
this.result = `The time taken in mili seconds is ${diff}`;

我也试过 this answer as , 但也不一致。

作为解决方法，我尝试使用 console.time功能，但它不允许呈现时间并且也不准确。

---

更新:我想建立一个类似jsPerf的界面，这将与它非常相似，但目的不同。大多数情况下，我想比较取决于用户输入的不同功能。

Answer 1

有 3 件事可以帮助您了解发生了什么:

1. 浏览器正在降低 performance.now() 精度以防止 Meltdown 和 Spectre 攻击，因此 Chrome 给出了最大 0.1 毫秒的精度，FF 1 毫秒等。这使得无法测量小的时间范围。如果函数非常快 - 0 ms 是可以理解的结果。 (感谢@kaiido)来源:paper , additional links here

2. 多线程环境中的任何代码(包括 JS)都不会以稳定的性能执行(至少由于操作系统线程切换)。因此，为数次单次运行获得一致的值是无法实现的目标。要获得一些精确的数字 - 应该多次执行函数，并取平均值。这甚至适用于低精度 performance.now()。 (无聊的解释:如果函数比 0.1 毫秒快得多，浏览器通常会给出 0 毫秒的结果，但有时某些函数运行会中奖，浏览器会返回 0.1 毫秒......更长的函数会更频繁地中奖)

3. 大多数JS引擎中都有“优化编译器”。它优化了常用的功能。优化是昂贵的，所以 JS 引擎只优化经常使用的函数。这解释了几次运行后性能提升的原因。首先函数以最慢的方式执行。多次执行后，优化，性能提升。 (应该添加热身跑吗？)

---

我能够在您的代码片段中获得非零数字 - 通过将 70kb 文件复制粘贴到输入中。在优化了第 3 次运行函数后，但即使在此之后 - 性能也不稳定

time taken is 11.49999990593642
time taken is 5.100000067614019
time taken is 2.3999999975785613
time taken is 2.199999988079071
time taken is 2.199999988079071
time taken is 2.099999925121665
time taken is 2.3999999975785613
time taken is 1.7999999690800905
time taken is 1.3000000035390258
time taken is 2.099999925121665
time taken is 1.9000000320374966
time taken is 2.300000051036477

---

第一点的解释

假设发生了两个事件，目标是在它们之间找到时间。第一个事件发生在时间 A，第二个事件发生在时间 B。浏览器正在四舍五入精确值 A 和 B 并返回它们。

要看的几个案例:

A       B       A-B         floor(A)    floor(B)    Ar-Br      
12.001  12.003  0.002       12          12          0
11.999  12.001  0.002       11          12          1