转载

Firefox 40中的新性能工具

本帖最后由 Felicia 于 2015-6-24 11:14 编辑

很高兴看到Firefox开发者专版现在已经具备了全新的性能工具。目前的 Firefox开发者专版也就是未来的Firefox 40（简称DE 40）。本文将讨论几项DE 40中的新开发工具，以及对现有工具的修正和改善。此外还有精彩的短片为大家呈现其中的几项功能。

介紹新的性能工具

Firefox开发者专版拥有全新的性能工具，让开发者可以站在App的性能观点来进一步了解实际所发生的事情。Web开发者也能通过这些工具来分析任何应用、网站甚至是游戏的性能。从趣味的角度看看这些工具是如何优化HTML5游戏。可以参考《Power Surge：用Firefox开发者专版优化HTML5游戏中的js》一文。

现在所有的性能工具都已经放在了性能（Performance）标签下面方便大家使用。性能和时间密切相关，所以开发者现在可以以时间轴的方式来监测浏览器事件。根据你想要查看的metrics，呈现更多细节。

Dan Callahan 将通过下方影片来展示性能工具的使用方法。

性能(Performance)标签有新的时间轴，包含 Waterfall 、 Call Tree 、 Flame Chart 等查看模式。

这些查看模式都能通过时间轴来呈现App整体性能的细节。时间轴将显示压缩的Waterfall、最低、最高和平局帧率（ Frame rates ），并以图形化的方式来呈现帧率。直接点击查看画面并拖拽到想看的范围，就能放大该段时间轴仔细查看。此时也会同步更新全部的三种查看模式，显示你所选择的特定范围。

记录查看模式，能让开发者迅速放大观看帧率问题发生的范围。

Waterfall查看模式是以图形化的时间轴呈现App中发生的事件。这些时间包含发生时间的标记，如reflows、restyles、garbage collection、paint operations、JavaScript 呼叫函数。通过简单的筛选按钮，即可选择你想在Waterfall中显示的事件。

在特定事件发生时，另可通过例如console.timeStamp() 的主控台指令，搭配Waterfall 上的标记来指定该事件。同样还可使用console.time() 和 console.timeEnd()函数，以图形化的方式呈现特定时间段。

Call Tree查看模式可以让 JavaScript 性能分析器 (Profiler) 呈现特定范围的结果，看到函数中所消耗的大概时间。此表格另外可以显示某一函数调用的总耗时，或是特定函数调用本身所消耗的时间。这里的总时间包含了函数内所消耗的全部时间，包含巢状函数调用做消耗的时间。本身耗用的时间就是“特定函数的耗时减去巢状调用函数的耗时”。如果想要找出占去大部分处理时间的函数，这个查看模式就非常有用了。Firefox早就支持这个模式，所以对使用过的开发者来说应该也不算陌生。

Flame Chart查看模式是以图形化的方式呈现选定范围之内的调用堆栈（这部分和Call Tree类似）。以下图为例，drawCirc() 函数共超过25微秒(millisecond，ms) 才完成，这段时间就大于60 fps帧产生的期限。

我们可以创建、存储、导入或是删除性能分析文档。此外也可以一次开启多个分析文档，用来对比每次执行之间的性能统计数据。开发者可以通过控制台或程序设计的方式来建立分析档案。只要输入console.profile("NameOfProfile")和console.profileEnd("NameOfProfile")，即可分别开启/停止分析档案。当要在自己的程序代码中开启/停止性能分析时，有利于开发者进行微调。