Chrome Dev Tools: Timeline


Timeline 面板可以在应用运行时记录和分析所有行为。此处最适合分析应用性能问题。

就像通过network标签找出时间耗费,通过sources标签找出有问题的代码一样,通过Timeline可以观察到更多详细细节。

使用点击timeline的圆形按钮,你可以记录(捕获)堆栈,js性能,内存和图形绘制(CSS)等信息。

chrome会以小粒度的详细日志来展现这些信息,可以通过很多种形式来查看。

所有这些信息可以帮助你很好地理解浏览器中发生的行为,尤其是发现内存占用比较多的事件。

在加载新页面之前记得先点击'clear'按钮再开始记录。

当记录JS事件时,点击title或左侧的'function call',会重定向到resource标签,同时定位到函数所在位置的代码行。

更多详细内容请访问: developers.google.com/web/tools/profile-performance/evaluate-performance/timeline-tool