JavaScript测量和影响性能的工具和技术

一、Firebug

Firebug是一款浏览器内嵌工具，它使Web开发人员能够完成很多以前根本完成不了的任务。我们可以通过使用控制台命令来调用函数或者运行代码，在联机状态下修改CSS，也可以监控那些形成一个网页所需要下载的资源。

1、安装

下载地址：Firebug：https://getfirebug.com/downloads/

下载安装完成后，可以通过单击浏览器右上角的Firebug控制台打开Firebug控制台。我们需要关注的是Net标签。

2、使用

Firebug中的网络监控是一个被动的监控工具；只需要点击Net选项卡——Network Monitoring（网络监控）的缩写，如果你是第一次单击这个选项卡，那么你还需要激活面板，然后浏览一个web页面。当这个页面加载时，你会看到所有的网络资源开始加载进来了，有一个瀑布图。

条柱按按行堆积排列，自上而下依次表示从最初到最后下载的元素，瀑布图还显示每项元素下载所消耗的时间。彩色编码竖型条柱表示在给定时间内连接的特定资源。蓝色——DNS查询，黄色——正在连接，红色——正在发送，紫色——正在等待数据，绿色——正在接收数据。

你可以使用Firebug来确认你的页面加载不会需要太长时间，知道哪一项加载的时间最长。Firebug试用于作为开发工具或者调试出现的问题。

二、YSlow

若想要更深入地分析网页性能，可以使用YSlow。

YSlow是Steve Souders及其在雅虎的团队开发的，发布于2007年。与Firebug类似，也是一个浏览器内嵌工具。

1、安装

访问https://yslow.org/并选择想要运行YSlow的平台就可以安装了。

2、使用

在YSlow界面中，可以就当前加载进浏览器的页面运行YSlow测试，或者选择每当加载进新页面就运行YSlow测试。

也可以选择特定的规则来对页面进行评估。

运行测试后，你可以看到视图被分为两部分：左边是规则及其各自的评级情况，右边是对规则的解释。想要充分了解YSlow使用规则，可以访问http://developer.yahoo.com/performance/rules.html

三、WebPagetest

WebPagetest是作为开源软件发布的。作为一个开源项目，WebPagetest可用在公开的网站，也可供用户下载来运行自己的实例。它的源代码库可以在https://code.google.com/webpagetest/找到。其公开的网站地址是http://www.webpagetest.org/

它将一个URL及其一系列配置参数作为输出，并对那个URL运行性能测试。你可以选择世界上任何一组网站地址进行测试，每个地址都可以用一个或多个浏览器对那个地址进行测试。你也可以指定连接速度及其运行测试的数量。

WebPagetest对网站Web性能提供了非常有帮助的信息，最为突出的是，WebPagetest是完全可以用来编写程序的。它提供了API（应用程序接口），可以在程序中调用这些接口以获取这些信息。

缩减

缩减的思想最初是基于JavaScript解释器对空格、换行符以及注释的忽略，因此如果移掉了不需要的字符，就可以缩减整个.js的大小。

四、Minify

在http://code.google.com/p/minify/ 可以找到它。Minify是作为JavaScript文件的代理使用的。Minify读取JavaScript文件，缩减该文件，并在响应时将http头的accept encoding置为使用gzip压缩。

要使用Minify，只需要下载后将其解压至/min文件夹并放到Web网站根目录下，然后到/min/builder/目录下打开Minify控制面板。在控制面板中，可以添加你想要缩减的JavaScript文件，页面生成可链接到JavaScript文件缩减后的脚本标签。

五、YUI Compressor

这也是一个缩减工具，可以在这里找到它：http://yuilibrary.com/download/yuicompressor/ 它是一个jar文件，而且要以命令行的方式运行。因此它可以便捷的整合到某个构建过程中。执行方式如下：

java -jar yuicompressor-[version].jar [options] [fire name]

想要了解更多细节，可以访问 http://developer.yahoo.com/yui/compressor

六、Closure Compiler

在 https://developers.google.com/closure/compiler/ 可以找到它

它也可以以命令行的方式运行，因此也可以整合进某个自动化过程中，它不仅缩减了JavaScript，而且通过重写进一步压缩了JavaScript。它会将它认为不会执行的所有代码全部删除。

它对性能的改进是显著的，但是代价是代码的可读性降低了，会比原代码更抽象。