1.4.4.1　性能分析器与时间轴工具

    要想发现代码中的性能瓶颈，性能分析器与时间轴工具是必不可少的。图1-8与图1-9分别展示了使用时间轴工具与性能分析器对图1-7中的动画程序进行分析时的样子。

    时间轴工具可以将应用程序中发生的重要事件记录下来，同时也一并记录了这些事件中的细节，包括事件的持续时间，以及其所影响的窗口区域等等。在基于WebKit的Chrome、Safari等浏览器之中，可以将鼠标悬停在这些事件之上，这样就可以获取与之相关的细节信息了，如图1-8所示。

    通过性能分析器，可以更为详尽地观察到程序代码在函数级别的性能表现。正如在图1-9中看到的那样，它可以显示出每个函数被调用的次数，以及这些函数调用所花费的时间。你可以看到每个函数的执行时间在总执行时间中所占的百分比，而且还可以精确地看到每个函数被执行一次平均要花费多少毫秒。

图1-8　时间轴工具

图1-9　性能分析器

    1.4.4.2　jsPerf

    图1-10中所示的jsPerf网站，可以让你创建并分享JavaScript性能测试。

图1-10　jsperf.com网站首页

    比方说，你可能会好奇，在处理canvas中的图像时，究竟何种方式才能够最为高效地将所有像素都遍历一次呢？点击图1-10顶部的“test cases”链接，jsPerf网站就会将所有公开的测试用例都显示出来，如图1-11所示。

图1-11　jsperf.com网站中的Canvas测试用例代码