JavaScript优化之工具

第十章 Tools 工具

本章主要介绍优化性能工具的使用,具体内容可以看原文,这里只是简单的叙述一下。


  • Profiling 性能分析:
    在脚本运行期定时执行不同函数和操作,找出需要优化的部分。
  • Network analysis 网络分析:
    检查图片,样式表,和脚本的加载过程,汇报它们对整个页面加载和渲染的影响。

  • 在调整代码之前,您应该确保脚本和其他资源的加载过程已经优化过了。图片和样式表加载会影响脚本加载,这取决于浏览器允许多少并发请求,有多少资源需要加载。
  • YUI 分析器(http://developer.yahoo.com/yui/profiler/),由 Nicholas Zakas 提供,是用 JavaScript 编写的
    JavaScript 分析器。除了计时功能,它还提供了用于函数、对象、和构造器的性能分析接口,还包括性能分析数据的详细报告。它可以跨浏览器工作,其输出数据可提供更强大的报告和分析。YUI 分析器提供一个通用定时器用于收集性能数据。Profiler 提供一些静态函数,用于启动和停止命名定时器,以及获取性能数据。
var count = 10000, i, element;
Y.Profiler.start('createElement');
for (i = 0; i < count; i++) {
element = document.createElement ('div');
}
Y.Profiler.stop('createElement');
alert('created ' + count + ' in ' + Y.Profiler.getAverage('createElement') + 'ms');

函数分析只需要注册一下。注册的函数被收集性能数据的代码调用。例如,要分析第二章提到的全局
initUI 方法,仅仅需要传入它的名字:

Y.Profiler.registerFunction("initUI");

  • 使用匿名函数或函数分配会造成分析器的数据模糊。由于这是 JavaScript 的通用模式,许多被分析的函数可能是匿名的, 对它们测量和分析很困难或根本无法进行。 分析匿名函数的最佳办法是给它们取个名字。使用指针指向对象方法而不是闭包,可以实现最广泛的分析覆盖。

Summary 总结


当网页或应用程序变慢时,分析网上传来的资源,分析脚本的运行性能,使你能够集中精力在那些需要努力优化的地方。

  • 使用网络分析器找出加载脚本和其它页面资源的瓶颈所在,这有助于决定哪些脚本需要延迟加载,或者进行进一步分析。
  • 传统的智慧告诉我们应尽量减少 HTTP 请求的数量,尽量延迟加载脚本以使页面渲染速度更快,向用户提供更好的整体体验。
  • 使用性能分析器找出脚本运行时速度慢的部分,检查每个函数所花费的时间,以及函数被调用的次数,通过调用栈自身提供的一些线索来找出哪些地方应当努力优化。
  • 虽然花费时间和调用次数通常是数据中最有价值的点,还是应当仔细察看函数的调用过程,可能发现其它优化方法。

这些工具在那些现代代码所要运行的编程环境中不再神秘。在开始优化工作之前使用它们,确保开发时间用在解决问题的刀刃上。