前端性能优化（五）-页面性能优化之优化工具——Google Page Speed & JsPerf 和 Benchmark.js

前端性能优化（五）-页面性能优化之优化工具——Google Page Speed & JsPerf 和 Benchmark.js

优化工具

Google Page Speed

Google Page Speed以帮助开发人员和网站所有者确保他们的网页尽可能顺畅，快速地运行。

Google Page Speed特点：

• 在CSS方面更加注重细节，对于CSS选择器，Google Page Speed提供了大量有用的建议
• 页面速度活动功能类似于加载计时器评估，但它实时提供图表，因此可以在任何给定时间准确查看网站上发生的情况。
• 自动优化：使用PageSpeed模块，可以将Google与您的Nginx或Apache网站服务器集成，以自动优化您的网站。
• 优化库集成：可以找到PageSpeed模块背后优化建议，允许设计和构建自己的工具。

对于某些人来说，Google Page Speed将是显而易见的选择，因为它可以与其他对维护网站性能至关重要的Google工具一起使用，例如Google Analytics。

JsPerf & Benchmark.js

经常看到项目中有一个benchmark的文件夹，那么这个benchmark是干嘛用的？

JsPerf在线：https://jsperf.com/

JsPerf Github地址：https://github.com/jsperf/jsperf.com

Benchmark.js网址：https://github.com/bestiejs/benchmark.js

BenchMark.js可以本地安装，而JsPerf.js是线上使用的。

HTML中引入：

<script src="lodash.js"></script>
<script src="platform.js"></script>
<script src="benchmark.js"></script>

或者使用npm:

$ {sudo -H} npm i -g npm
$ npm i --save benchmark

下面是一个具体的用例：

Reg vs IndexOf

var suite = new Benchmark.Suite;

// add tests
suite.add('RegExp#test', function() {
  /o/.test('Hello World!');
})
.add('String#indexOf', function() {
  'Hello World!'.indexOf('o') > -1;
})
// add listeners
.on('cycle', function(event) {
  console.log(String(event.target));
})
.on('complete', function() {
  console.log('Fastest is ' + this.filter('fastest').map('name'));
})
// run async
.run({ 'async': true });

// logs:
// => RegExp#test x 4,161,532 +-0.99% (59 cycles)
// => String#indexOf x 6,139,623 +-1.00% (131 cycles)
// => Fastest is String#indexOf

再来看一个 call与apply的对比：

var Benchmark = require('benchmark');
var suite = new Benchmark.Suite;
var arr1 = function (str) {
    return [].slice.apply(str);
};
var str2 = function (str) {
    return [].slice.call(str);
};
// 添加测试
suite.add('arr1', function() {
    arr1('test');
})
    .add('str2', function() {
        str2('test');
    })
// add listeners
    .on('cycle', function(event) {
        console.log(String(event.target));
    })
    .on('complete', function() {
        console.log('Fastest is ' + this.filter('fastest').pluck('name'));
    })
// run async
    .run({ 'async': true });

benckmark是对js运行能效的一个对比测试，让你能够知道自己的JS代码中与其他方案对比的时候，是否有优化的空间。当然，这些新的方案，需要自己去编写去测试。同样，也可以在JsPerf的官网上去看其他的测试结果。

执行办法 ：

npm init -y

npm install -S benchmark

touch test.js //Linux  创建文件-test.js

node test.js  //执行文件-test.js