Question

我很难理解为什么console.time的以下两种实现的时序会有所不同。我试图测试我写的一个函数，但是当我用以下两种方式实现console.time时，我会得到非常不同的答案......

为了尝试诊断这一点，我使用了Array.prototype.sort()并且产生了相同的时序不一致性。 arr是一个长度为n且随机整数的数组。我用长度为10,100,1000,10000,100000的随机整数数组进行了测试。

注意：我知道performance api存在，但我想了解console.time发生了什么。

方法1

function timeLog(title, arr) {
    console.time(title);
    arr.sort();
    console.timeEnd(title);
}

timeLog('time test 1', arr);

方法2：

console.time('time test 2');
arr.sort();
console.timeEnd('time test 2');

我的结果：

with method 1
10 item array: 0.198ms
100 item array: 0.196ms
1000 item array: 3.386ms
10000 item array: 65.558ms
100000 item array: 326.774ms

with method 2
10 item array: 0.022ms
100 item array: 0.081ms
1000 item array: 0.534ms
10000 item array: 12.865ms
100000 item array: 77.395ms

Runnable Snippet：

＆＃13;

function randomArray(n) {
  return Array.apply(null, Array(n))
    .map(function() {
      return Math.floor(Math.random() * 1000);
    });
}

function timeLog(title, array) {
  console.time(title);
  array.sort();
  console.timeEnd(title);
}

var arr10 = randomArray(10);
var arr100 = randomArray(100);
var arr1000 = randomArray(1000);
var arr10000 = randomArray(10000);
var arr100000 = randomArray(100000);

var arr10_2 = arr10.slice();
var arr100_2 = arr100.slice();
var arr1000_2 = arr1000.slice();
var arr10000_2 = arr10000.slice();
var arr100000_2 = arr100000.slice();

console.log('method 1: with timeLog function')
timeLog('10 item array', arr10)
timeLog('100 item array', arr100)
timeLog('1000 item array', arr1000)
timeLog('10000 item array', arr10000)
timeLog('100000 item array', arr100000)
console.log();

console.log('method 2: just console.time');
console.time('10 item array-2')
arr10_2.sort()
console.timeEnd('10 item array-2')
console.time('100 item array-2')
arr100_2.sort()
console.timeEnd('100 item array-2')
console.time('1000 item array-2')
arr1000_2.sort()
console.timeEnd('1000 item array-2')
console.time('10000 item array-2')
arr10000_2.sort()
console.timeEnd('10000 item array-2')
console.time('100000 item array-2')
arr100000_2.sort()
console.timeEnd('100000 item array-2')

＆＃13;

Answer 1

我认为只是你在同一时间对它们进行测试，并且在第一次传递期间优化正在进行中。（和/或其他测试方法问题，例如重新排序相同的数组等;无法判断问题的内容。）

如果我在10,000项数组上执行此操作，请小心为每个测试使用相同的值（并注意第二个不排序按第一个排序的数组），在Chrome上我可以看到第二个sort比第一个timeLog更快的时间 - 无论我先使用timeLog还是先使用内嵌代码：

首先使用var arr1 = Array.from({length:10000}, () => Math.floor(Math.random() * 1000)); var arr2 = arr1.slice(); function timeLog(title, arr) { console.time(title); arr.sort(); console.timeEnd(title); } timeLog('time test 1', arr1); console.time('time test 2'); arr2.sort(); console.timeEnd('time test 2');：

var arr1 = Array.from({length:10000}, () => Math.floor(Math.random() * 1000));
var arr2 = arr1.slice();

function timeLog(title, arr) {
    console.time(title);
    arr.sort();
    console.timeEnd(title);
}

console.time('time test 2');
arr2.sort();
console.timeEnd('time test 2');

timeLog('time test 1', arr1);

首先使用内联代码：

timeLog

如果我这样做两次，我发现差异第二次消失了：

两次，先使用var arr1 = Array.from({length:10000}, () => Math.floor(Math.random() * 1000)); var arr2 = arr1.slice(); var arr3 = arr1.slice(); var arr4 = arr1.slice(); function timeLog(title, arr) { console.time(title); arr.sort(); console.timeEnd(title); } timeLog('timeLog 1', arr1); console.time('inline 1'); arr2.sort(); console.timeEnd('inline 1'); timeLog('timeLog 2', arr1); console.time('inline 2'); arr2.sort(); console.timeEnd('inline 2');：

var arr1 = Array.from({length:10000}, () => Math.floor(Math.random() * 1000));
var arr2 = arr1.slice();

var arr3 = arr1.slice();
var arr4 = arr1.slice();

function timeLog(title, arr) {
    console.time(title);
    arr.sort();
    console.timeEnd(title);
}

console.time('inline 1');
arr2.sort();
console.timeEnd('inline 1');

timeLog('timeLog 1', arr1);

console.time('inline 2');
arr2.sort();
console.timeEnd('inline 2');

timeLog('timeLog 2', arr1);

两次，首先使用内联代码：

{{1}}

Javascript性能：console.time

1 个答案: