如何使用开发人员控制台跟踪JavaScript性能

有一个通用规则适用于所有网站和应用程序： 它们必须快速 。 （几年前，我曾说过站点应该是响应式的 ，尽管这个词现在具有RWD的含义）。

不幸的是，很明显，一些开发人员并不关心站点速度。 如果他们这样做了，那么兆字节的怪兽将是罕见的，并且平均页面权重永远不会超过1Mb。 当我认为100Kb主页过大时，这几乎使我渴望拨号上网！

轻便，快速的用户体验从未如此重要。 发展中国家的移动和Web使用正呈指数级增长，而快速宽带从未如此丰富或廉价。 整理页面脂肪至关重要，因此优化JavaScript性能也至关重要。 幸运的是，有许多简单的方法可以确定脚本是否引起严重的延迟。

控制台计时

Firebug，Webkit Inspector，Opera Dragonfly和IE11都支持console.time()和console.timeEnd()方法，例如

// start timer
console.time("DOM update");

// update
var p = document.getElementById("result");
for (var i = 0; i < 3000; i++) {
	p.textContent += i + " ";
}

// end timer
console.timeEnd("DOM update");

计时器名称将传递给console.time()和console.timeEnd() 。 您可以运行任意数量的计时器：

// start "DOM update" timer
console.time("DOM update");

// update
var p = document.getElementById("result");

// start "loop" timer
console.time("loop");
for (var i = 0; i < 3000; i++) {
	p.textContent += i + " ";
}
// end "loop" timer
console.timeEnd("loop");

// end "DOM update" timer
console.timeEnd("DOM update");

结果显示在开发人员控制台中：

分析时间戳记

另一个选择是时间戳记。 这仅在Firebug和Webkit检查器中可用-它在执行期间记录一个点，例如

// record timestamp
console.timeStamp("DOM update started");

// update
var p = document.getElementById("result");
for (var i = 0; i < 3000; i++) {
	p.textContent += i + " ";
}

// record timestamp
console.timeStamp("DOM update ended");

遇到时间戳时，将显示Firebug：

这可能会有所帮助，但是Webkit Inspector还有一些技巧。 单击时间轴选项卡，然后单击窗口左下方的“ 记录”图标：

刷新页面，然后再次单击“ 记录”图标以停止记录。 时间线显示了所有事件的可视化表示形式，其中timeStamps在计时器栏中标记为黄色：

很有用。

删除计时器

理想情况下，永远不要在生产代码中保留控制台日志。 如果这样做，则需要测试这些方法是否可用，因为它们会在不支持它们的浏览器中引起错误，例如

if (console && console.timeStamp) console.timeStamp("My timestamp");

就个人而言，我建议删除所有控制台命令。 一些构建过程将为您完成此操作，或者您可以在编辑器中使用以下正则表达式来定位和删除所有与计时器相关的日志记录：

console.time[^(]*("[^"]+");

打开控制台并开始优化这些脚本！

From: https://www.sitepoint.com/javascript-performance-developer-console/