Javascript : console.time

Question

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

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

注意:我知道 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

可运行的片段：

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')

​

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);

​