《高性能javascript》读书笔记：第十章 工具

 js性能分析

 一个能处理时间计算并存储数据的Timer对象：

var Timer={

　　_data:{},

　　start:function(key){

　　　　Timer._data[key]=new Data();

　　},

　　stop:function(key){

　　　　var time=Timer._data[key];

　　　　if(time){

　　　　　　Timer._data[key]=new Data()-time;

　　　　}

　　},

　　getTime:function(key){

　　　　return Timer._data[key];

　　}

};

使用方法如下：

Timer.start('name1');

//在这里进行的是需要计算时间的参数

Timer.stop('name1');

alert(Timer.getTime('name1');

 

 

YUI Profiler

http://developer.yahoo.com/yui/profiler/

除了计时功能，还包括针对函数、对象和构造器的性能分析接口，并提供性能分析数据的详细报告。

 

 

匿名函数

使用匿名函数或赋值函数可能会造成分析工具的数据变得很混乱。解决方案是最好给需要分析的它们取个名字。

myNode.onclick=function(){

　　myApp.loadData();

};

改成如下：

myNode.onclick=function myNodeClickHandler(){

　　myApp.loadData();

};

 

Firebug

Firefox的插件。http://www.getfirebug.com

 

IE开发人员工具

自IE8起自带。

不过它缺少网络分析工具，建议和Fiddler等其它通用工具配合使用。

 

Safari Web检查器(Web Inspector)

Safari从4.0版本开始，除了其它工具外，还提供了一个性能分析工具，包含在网络analyzer中，作为Web Inspector的一部分。

 

脚本阻塞

脚本阻塞会因一个或多个文件初始化缓慢而变得更加严重，有必要对它做一些分析，并有可能需要优化或重构。

 

Page Speed

最初是google为内部用途所开发的一个工具，后来作为firebug的插件发布，它类似firebug的网络面板，提供了web页面加载的资源的信息。然而，除了加载时间和http状态，它还能显示解析和运行js消耗的时间，指明可延迟加载的脚本，并报告那些没有被使用的函数。

http://code.google.com/speed/page-speed/

Page Speed还为Firebug添加了一个Page Speed Activity面板，该面板类似firebug自带的网络面板，但它为每个请求提供了更加精确的数据。其中包括每个脚本生命周期的统计分析--包括解析和运行阶段，并提供了脚本之间时间线间隙的详细说明。

 

Fiddler

是一个http调试代理工具，能监测到网络中所有的资源，以定位加载瓶颈。能提供任何浏览器或网络请求的详细报告。

http://www.fiddler2.com/fiddler2/

 

YSlow

YSlow工具可以深入观察页面初始加载和运行过程的整体性能。该工具最初由yahoo!内部开发，作为firefox的插件（通过GreaseMonkey使用）。如今它已发布为一个Firebug的插件。

http://developer.yahoo.com/yslow/

 

dynaTrace Ajax Edition

dynaTrace是一个强大的java/.net性能诊断工具，它的开发人员已经发布了一个"Ajax Edition"用来测量IE性能(Firefox版即将发布).免费工具。提供了一个全面的性能分析，从网络和页面渲染到运行期脚本和CPU使用率。分析报告将所有信息汇总，所以很容易地发现瓶颈所在。

http://ajax.dynatrace.com/pages/