内存 现在看过了时间线并对你的应用进行了相应的优化，但你的应用在用过一段时间后还是会不时地出岔，有时运行缓慢，有时显示内容时断断续续。在时间线中你也已经看到了有很多“GC” (内存垃圾回收的缩写，GC会时不时的跑出来清理闲置的对象。) 事件发生，内存工具就是帮助你来解决这方面的问题的。 Tony Gentilcore写了一篇很不错的文章，介绍了如何查找并修复内存泄露问题，这篇文章你一定要拜读一下。下面我来简单概述一下这篇文章。 在侧边栏单击Memory，然后单击“record”按钮。此时就在你的应用中执行任务并观察内存的变化情况。下图所示是一个应用的内存简况（profile）图，该应用只是在每次发生鼠标移动事件时生成一个对象并丢弃该对象。：  典型的JavaScript代码的内存图样子就像锯齿：先是在GC运行前所占内存不断增加，然后GC就会适时回收闲置内存。在GC运行过几轮后，内存图就应该会比较平坦了。如果在每次GC运行的间隙图形一直都是朝上高走，那么这就是发生了内存泄漏。随着你的应用不断地吞噬越来越多的内存，其运行速度就会越来越慢，有的浏览器(MobileSafari)实际上会直接结束你的应用。 在图形的下面显示的是DOM节点和事件侦听器调用总数，这些数据非常有用。这些数据的含义都相当的不言自明。 最后再说说，假如你在将应用部署到了生产环境（in production）后，发现里面还有一个bug并在Inspector定位出了这个bug发生在哪里。你如何把这一情况告诉你的同事或开发人员？其实，完全可以不用弄静态的截屏，实际上你可以右击“Timelines”和“Memory”，将你调试过程保存下来，这样你就能够将真正的调试数据分享给别人了。这在团队工作中方便极了。 到现在为止，你开发的应用看上去和你想要的样子很吻合，HTTP请求的总数也降到了最小，但应用中让浏览器做了许多本不需要做的事。有些地方还不太对。所有的一切都是清清爽爽的，只有一个小地方不是这样。你也已经用时间线面板对它进行调试了，但还是没有发现什么有深度的细节性信息。看来运行慢不是浏览器的过，而是你的代码。 此时就是该Profiles面板上场大显身手的时候了。 JavaScript的CPU分析器（Profiler） 在分析面板中要做的第一类事情就是进行JS的CPU执行效率分析。这个描述高度概括了它的要测量的是什么：你的应用中哪些函数的运行时间最长。 选中Profile面板后单击“Start”按钮。随后你所作的动作都会被记录下来，直到你按下那个鲜艳的红色“Record”按钮才会停止记录（也可以单击“Stop”按钮）。一旦记录停止，分析器就会按顺序显示出记录期间所执行的所有函数以及每个函数执行所花的时间。你可能看到了列表顶端有个“(program)”这样的一项内容。那是用来显示WebKit干活时所花的时间。你不能再进一步查看它的内容了，而且对它也做不了什么事情（但是在时间线标签下应该可以帮你定位这方面的bug）。 除此之外，下图所示是典型的Profile面板的样子：  图中所示是对我的博客网站进行分析的结果，分析期间我打开了相册并多次打开/关闭了几张照片。 看起来这部分交互过程中最耗时的是设置curtain的透明度和getBoundingClientRect。要对应用的这部分交互过程进行优化，需要的正是这方面的信息。
CSS选择器分析器（CSS Selector Profiler） 使用CSS并不是没有代价。复杂的样式表从分析到计算再到最后应用，每一步都要花一些时间。CSS选择器分析器显示的是每个选择器同DOM节点匹配的次数，以及浏览器应用这些选择器时所花的时间。在具有很多同一类型div的比较复杂的应用中，对这些div应用样式所花的时间在应用从调入浏览器到完成装载的这段时间中占的比例相当大。 Heap Snapshot（堆快照） 这个是Inspector中最不好用的视图。不好用到我根本就没发现它有什么用处。看看这个例子：  据我所察，这个视图里有用信息的量是零。 还得提一下Tony Gentilcore的这篇文章，也许它能点亮你前行之路。 Audits（审计）面板 马上就要完工啦！最后要说的是Audits面板，它的作用基本上是在把应用部署到生产环境之前最后再给你一些性能方面的提醒。 实际上，它会对各种资源以及所有的HTTP请求进行检查，根据业界当前的最佳实践提出一些改进意见。例如，在我撰写本文时，我运行了一下Audit面板，它告诉我，为了让布局过程能快一点完成，我应该在HTML里指定图片的大小。提醒得太好了！ 文中所有的小技巧都有详细的文档可看，你应该至少快速浏览一下那些文档。 结论我希望你已发现本文中至少有那么一部分信息能对你有用。迄今为止，我编写复杂的桌面以及移动设备Web应用有2年的时间了。为了解决各种不同类型的问题，我使用过本文所述的每一个面板。 如果我曲解了什么、漏掉了什么或者犯了什么错误，恳请告知。 |
