如何在Chrome里获得console.timeEnd()的值？

在写上一篇示例代码《如何在JavaScript里拼接字符串？》的时候，我想让最后一个例子里的代码里console.timeEnd()的值能够在运行结果框里面显示，但是却无法找到解决的办法。

因此，专门想一下如何解决这个问题，网上搜索了一下，建议是这样的：使用window.performance.now()来计时，代码可以这么写：

const s1 = "Hello 乐码范！";

const count = 1000000;

const start = window.performance.now();
let result = '';
for (let i = 0; i < count; i++) {
    result = result + s1;
}
const end = window.performance.now();
console.log(`${end - start}ms`); // 点"运行"查看结果，大概是100ms左右

这样做，实际上是不再用console.time()/console.timeEnd()来计时，而是使用了window.performance.now()

这个API已经在主流的浏览器都有支持，可以放心使用。

为什么不用Date.now()的方式呢？原因是其不如window.performance.now()的时间计时更精确，前者只能计时到毫秒的级别，因此更推荐使用后者，但是一般不太严格的使用场景下，Date.now()也是够用的。

参考如下的代码：

const s1 = "Hello 乐码范！";

const count = 1000000;

const start = window.performance.now();
const start1 = Date.now();
let result = '';
for (let i = 0; i < count; i++) {
    result = result + s1;
}
const end = window.performance.now();
end1 = Date.now();
console.log(`${end - start}ms`); // 点"运行"查看结果，大概是100ms左右
console.log(`${end1 - start1}ms`); // 点"运行"查看结果，大概是100ms左右

但是，如果实在想用console.timeEnd()呢？如果是在试验的情况下，可以这么写代码：

// 重写console.time()和timeEnd()
const nativeConsoleTime = console.time;
const nativeConsoleTimeEnd = console.timeEnd;
const data = {};
console.time = function(label) {
    data[label] = window.performance.now();
}
console.timeEnd = function(label) {
    const end = window.performance.now();
    // 这里可以用来获取时间，在当前例子里是输出到document，满足示例的需要
    document.write(`${end - data[label]}ms`); 
    delete data[label];
}

// 正常使用console.time()/timeEnd()
const s1 = "Hello 乐码范！";
const count = 1000000;

console.time('加号拼接');
let result = '';
for (let i = 0; i < count; i++) {
    result = result + s1;
}
console.timeEnd('加号拼接');

// 恢复console.time()/timeEnd()
console.time = nativeConsoleTime;
console.timeEnd = nativeConsoleTimeEnd;

这个例子只是展示了一个特定场景改造console.time()和console.timeEnd()，使用场景可能在debug的时候多一些，不过也可以看出JavaScript是一个非常动态的语言。