利用jsPerf优化Web应用的性能

时间:2022-12-09 19:17:39

在前端开发的过程中,掌握好浏览器的特性进行有针对性的性能调优是一项基本工作,jsperf.com是一个用来发布基于HTML的针对性能比较的测试用例的网站,你可以在jsPerf上在线填写和运行测试用例,得到浏览器运行测试用例的性能,学会利用jsPerf会让你的优化工作事半功倍。

书写测试用例

我想写一个简单的例子,验证一个算法是否更高效,这里我想到了字符串的拼接。在JS里拼接大量字符串有两种常见的方法,一是直接用加号(+)连接所有的字符串,二是用数组的join函数拼接起来。在很多书中都提到采用第二种方法的效率更高,那么我们就用jsPerf来验证一下。

第一步,打开jsPerf(http://jsperf.com),在Test case details区域填入测试的基本信息,测试的名称(Title)、短名称(Slug),Slug用于生成将来的测试页面的地址,所以不能与现有的重复。然后你可以选择是否马上发布(Published),在Description区域填入测试的目的和方法之类的描述。

第二步就是写测试用例了。我准备为这两个算法各写一个测试用例(test case),而这两个例子都需要一个很大的字符串数组作为输入,这时你需要在Preparation code区域准备好这个数组,在"Define setup for all tests"区域填入如下代码,会为我生成这样一个大字符串数组。下面是生成数组的代码:

1 var bigArray = [];
2 for (var i = 0; i < 1000; i++) {
3     bigArray.push('This is a test!test!test!');
4 }

你也可以在Define teardown for all tests区域执行一些JS代码,清除运行测试用例产生的DOM结点、JS变量等等,以免影响到再次运行测试用例。

除了准备JS代码之外,还可以在Preparation code HTML区域准备你的HTML代码、CSS样式表,以及引入第三方JS库(如jQuery等)。

准备好数组之后,就在下面的“Code snippets to compare”中分别填入算法的简单描述(Title)和代码(Code),Async选项框是用来测试一些异步调用的性能的,我们的代码没有使用异步方法,所以不必勾选。

直接用加号连接:

1 var result = '';
2 for (var i = 0, length = bigArray.length; i < length; i++) {
3     result += bigArray[i];
4 }

用数组的join函数:

1 var result = bigArray.join('');

jsPerf默认只有两个测试用例,如果你要添加额外的,可以点击最下面的“Add code snippet”添加,另一个按钮“Beautify code”可以帮助你格式化代码,自动调整缩进,让代码显示更美观。

最后,点击“Save test case”保存测试用例。浏览器会自动跳转到测试页面。点击这里(http://jsperf.com/compare-string-concat)可以直接查看完整的测试用例。

有时在提交了测试用例之后发现有问题,可以通过在测试地址后面加/edit打开测试用例的编辑页面,添加和修改你的测试用例。

运行测试

好,点击“Run tests”按钮开始测试两种算法的性能。建议在运行性能测试之前,关闭无关的浏览器页面,关闭其他程序,退出不必要的后台进程,以保证结果不受其他环境的影响。你也可以通过点击个别测试用例的名字单独运行这个例子。

读懂测试结果

测试结果以每秒钟执行测试代码的次数(Ops/sec)显示,这个数值越大越好。除了这个结果外,同时会显示测试过程中的统计误差,以及相对最好的慢了多少(%),统计误差也是非常重要的指标,如果你写的测试用例不好,或者说后台正在运行一些其他程序,会造成统计误差过大,这时测试结果就不够可靠。

在我们这个例子中,在我的Chrome 24浏览器上,第二种方法比第一种方法慢了62%,在Firefox 18上,第二种方法慢了70%,我们惊奇地发现第二种方法反而比第一种更慢!只有在IE8上,第一种方法慢了78%。

jsPerf还会统计所有运行过这个测试用例的浏览器的比较结果,显示在下方的Browserscope区域,可以通过它直观地看出各个版本浏览器的性能横向和纵向比较情况。

异步测试

jsPerf也能支持像setTimeout这种异步的调用测试,异步测试用例需要在书写用例时选中“Async”,并且在异步调用结束后及时调用deffered.resolve()。这儿(http://jsperf.com/smallest-timeout)有一个异步测试用例的示例。

查看别人的测试用例

jsPerf上提供所有测试的查询,打开http://jsperf.com/browse就可以看到最近提交的测试,也可以输入关键词来进行查找。查看别人写的测试用例,可以帮助你发现更多性能调优的方法,以便用于自己的开发工作中。

https://software.intel.com/zh-cn/articles/optimize-web-app-using-jsperf