第一章 基础知识

    可以调用console.log()方法，向控制台写入信息。传递给该方法一个字符串，它就会显示在控制台之中。调试器的界面很标准，可以在此设定断点、监控表达式、查看变量及调用堆栈等等。

    要对不同浏览器所提供的开发工具展开论述，则超出了本书的范围。要想深入了解有关Chrome浏览器开发工具的更多资讯，请参阅Chrome Developer Tools文档，该文档如图1-6所示。其余浏览器也都提供了类似的文档。

图1-6　Chrome Developer Tools文档

    小技巧：以编程的方式来启动与停止性能分析器

    正如在图1-6中看到的那样，在基于WebKit的浏览器中，可以通过点击性能分析窗口下方的实心圆圈按钮来启动性能分析。

    然而，以点击按钮的方式来启动性能分析，有时是不够的。举例来说，你也许希望在执行到某几行特定的代码时开始分析，在执行完它们之后就停止性能分析。在基于WebKit的浏览器中，调用这两个方法就可以完成该功能：console.profile()及console.profileEnd()。可以像这样来使用它们：

console.profile('Core HTML5 Animation,

                erasing the background');

//...

console.profileEnd();

    1.4.4　性能

    在大多数情况下，采用Canvas来实现的应用程序都会有极好的性能。不过，如果你在制作动画、游戏，或是实现基于Canvas的手机应用程序，那么可能需要做一些性能优化。

    在本小节之中，我们将简单介绍一些可供开发者使用的性能瓶颈侦测工具。为了演示这些工具的用法，我们会用到如图1-7中所示的这个应用程序。本书在第5章中将会讲解这个动画的制作，它让三个实心圆形同时在屏幕上运动。

图1-7　第5章中的动画程序

    我们要讲解如下三个工具的用法：

    ·性能分析器（Profiler）

    ·时间轴工具（Timeline）

    ·jsPerf

    上述列表中的前两个工具都直接由浏览器提供，或是可以通过安装“附加元件”（add-on）来取得。然而，jsPerf则是一个网站，可以在此创建性能测试，并将其发布给大众。在本小节下面几个段落中，我们先来看看Chrome与Safari浏览器所提供的性能分析器与时间轴工具，然后再了解一下jsPerf。