JavaScript从代码角度看性能

大家好！我是前端爬楼工程师🚹，一个野生程序员。好奇新技术，仰慕牛大佬。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～

---

之前聊的是宏观程序架构的性能，这里开始看看代码上的性能调优。

性能测试

一般我们看性能好不好，主要关注它的运行时间。如何测试某个运算的速度呢？

我们可以直接使用Benchmark.js性能测试工具。不仅可以在浏览器中测试，也可以在Node.js中运行。

function foo(){
    // 要测试的运算
}
var bench = new Benchmark("foo test", foo, {...options})
bench.hz // 每秒运算数
bench.stats.moe // 出错边界
bench.stats.variance // 样本方差

benchmarkjs还可以用于开发或测试环境中，针对JavaScript关键路径运行自动性能回归测试，还可以和以前的版本进行性能测试比较。

bench的选项中的setup/teardown

定义在测试之前和测试之后调用的函数。注意这个之前之后是对于性能测试而言的，代码重复调用也会执行一次。

尽管Benchmark.js在所有的JavaScript运行环境下都可以用于测试代码的性能，但如果想得到一份可靠的测试结论，就需要在很多不同环境中（桌面机器、移动设备、电量等因素）测试汇集测试结果。

jsPerf

这里就需要另外一个工具就是jsPerf。测试运行的时候，测试结果会被收集持久化，累积测试结果会被图形化，并展示到一个页面上。它使用的是Benchmark.js运行统计精确可靠的测试。

写好测试

好的测试并不是执着于微小的一部代码上的性能，而是一整块的上下文的性能测试。

v8优化提到的例子

• 不要从一个函数到另外一个函数传递arguments变量，这样的泄露会降低函数的实现速度。
• 把try..catch分离到单独的函数里。浏览器对try..catch实行优化都有一些困难。

尾调用优化

function foo(x){
    return x
}
function bar(y){
    return foo(y+1) //尾调用
}
function baz(){
    return 1 + bar(40) //非尾调用
}

bar调用的时候，再调用foo，这个时候foo不需要创建新的栈，可以重用已有的bar的栈。所以这样速度快，节省内存。

---