函数运行改善它性能的计划。那怎么去证明这个假设呢？在今天，有什么最佳实践可以用来测试JavaScript函数的性能呢？一般来说，完成这个任务的最佳方式是使用内置的performance.now()函数，来衡量函数运行前和运行后的时间。
我们会讨论如何衡量代码运行时间，以及有哪些技术可以避免一些常见的“陷阱”。
Performance.now()
高分辨率时间API提供了一个名为now()的函数，它返回一个DOMHighResTimeStamp对象，这是一个浮点数值，以毫秒级别（精确到千分之一毫秒）显示当前时间。单独这个数值并不会为你的分析带来多少价值，但是两个这样的数值的差值，就可以精确描述过去了多少时间。
这个函数除了比内置的Date对象更加精确以外，它还是“单调”的，简单说，这意味着它不会受操作系统（例如，你笔记本上的操作系统）周期性修改系统时间影响。更简单的说，定义两个Date实例，计算它们的差值，并不代表过去了多少时间。
“单调性”的数学定义是“（一个函数或者数值）以从不减少或者从不增加的方式改变”。
我们可以从另外一种途径来解释它，即想象使用它来在一年中让时钟向前或者向后改变。例如，当你所在国家的时钟都同意略过一个小时，以便最大化利用白天的时间。如果你在时钟修改之前创建了一个Date实例，然后在修改之后创建了另外一个，那么查看这两个实例的差值，看上去可能像“1小时零3秒又123毫秒”。而使用两个performance.now()实例，差值会是“3秒又123毫秒456789之一毫秒”。
在这一节中，我不会涉及这个API的过多细节。如果你想学习更多相关知识或查看更多如何使用它的示例，我建议你阅读这篇文章：Discovering the High Resolution Time API。
既然你知道高分辨率时间API是什么以及如何使用它，那么让我们继续深入看一下它有哪些潜在的缺点。但是在此之前，我们定义一个名为makeHash()的函数，在这篇文章剩余的部分，我们会使用它。
JavaScript
| 1 2 3 4 5 6 7 8 9 10 | function makeHash(source) { var hash = 0; if (source.length === 0) return hash; for (var i = 0; i < source.length; i++) { var char = source.charCodeAt(i); hash = ((hash<<5)-hash)+char; hash = hash & hash; // Convert to 32bit integer } return hash; } |
我们可以通过下面的代码来衡量这个函数的执行效率：
JavaScript
| 1 2 3 4 | var t0 = performance.now(); var result = makeHash('Peter'); var t1 = performance.now(); console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result); |
如果你在浏览器中运行这些代码，你应该看到类似下面的输出：
JavaScript
| 1 | Took 0.2730 milliseconds to generate: 77005292 |
这段代码的在线演示如下所示：
记住这个示例后，让我们开始下面的讨论。
缺陷1 – 意外衡量不重要的事情
在上面的示例中，你可以注意到，我们在两次调用performance.now()中间只调用了makeHash()函数，然后将它的值赋给result变量。这给我们提供了函数的执行时间，而没有其他的干扰。我们也可以按照下面的方式来衡量代码的效率：
JavaScript
| 1 2 3 4 | var t0 = performance.now(); console.log(makeHash('Peter')); // bad idea! var t1 = performance.now(); console.log('Took', (t1 - t0).toFixed(4), 'milliseconds'); |
这个代码片段的在线演示如下所示：
但是在这种情况下，我们将会测量调用makeHash(‘Peter’)函数花费的时间，以及将结果发送并打印到控制台上花费的时间。我们不知道这两个操作中每个操作具体花费多少时间， 只知道总的时间。而且，发送和打印输出的操作所花费的时间会依赖于所用的浏览器，甚至依赖于当时的上下文。
或许你已经完美的意识到console.log方式是不可以预测的。但是执行多个函数同样是错误的，即使每个函数都不会触发I/O操作。例如：
JavaScript
| 1 2 3 4 5 | var t0 = performance.now(); var name = 'Peter'; var result = makeHash(name.toLowerCase()).toString(); var t1 = performance.now(); console.log('Took', (t1 - t0).toFixed(4), 'milliseconds to generate:', result); |
同样，我们不会知道执行时间是怎么分布的。它会是赋值操作、调用toLowerCase()函数或者toString()函数吗？
缺陷 #2 – 只衡量一次
另外一个常见的错误是只衡量一次，然后汇总花费的时间，并以此得出结论。很可能执行不同的次数会得出完全不同的结果。执行时间依赖于很多因素：
- 编辑器热身的时间（例如，将代码编译成字节码的时间）
- 主线程可能正忙于其它一些我们没有意识到的事情
- 你的电脑的CPU可能正忙于一些会拖慢浏览器速度的事情
持续改进的方法是重复执行函数，就像这样：
JavaScript
| 1 2 3 4 5 6 | var t0 = performance.now(); for (var i = 0; i < 10; i++) { makeHash('Peter'); } var t1 = performance.now(); console.log('Took', ((t1 - t0) / 10).toFixed(4), 'milliseconds to generate'); |
这个示例的在线演示如下所示：
这种方法的风险在于我们的浏览器的JavaScript引擎可能会使用一些优化措施，这意味着当我们第二次调用函数时，如果输入时相同的，那么JavaScript引擎可能会记住了第一次调用的输出，然后简单的返回这个输出。为了解决这个问题，你可以使用很多不同的输入字符串，而不用重复的使用相同的输入（例如‘Peter’）。显然，使用不同的输入进行测试带来的问题就是我们衡量的函数会花费不同的时间。或许其中一些输入会花费比其它输入更长的执行时间。
缺陷 #3 – 太依赖平均值
在上一节中，我们学习到的一个很好的实践是重复执行一些操作，理想情况下使用不同的输入。然而，我们要记住使用不同的输入带来的问题，即某些输入的执行时间可能会花费所有其它输入的执行时间都长。这样让我们退一步来使用相同的输入。假设我们发送同样的输入十次，每次都打印花费了多长时间。我们会得到像这样的输出：
JavaScript
| 1 2 3 4 5 6 7 8 9 10 | Took 0.2730 milliseconds to generate: 77005292 Took 0.0234 milliseconds to generate: 77005292 Took 0.0200 milliseconds to generate: 77005292 Took 0.0281 milliseconds to generate: 77005292 Took 0.0162 milliseconds to generate: 77005292 Took 0.0245 milliseconds to generate: 77005292 Took 0.0677 milliseconds to generate: 77005292 Took 0.0289 milliseconds to generate: 77005292 Took 0.0240 milliseconds to generate: 77005292 Took 0.0311 milliseconds to generate: 77005292 |
请注意第一次时间和其它九次的时间完全不一样。这很可能是因为浏览器中的JavaScript引擎使用了优化措施，需要一些热身时间。我们基本上没有办法避免这种情况，但是会有一些好的补救措施来阻止我们得出一些错误的结论。
一种方式是去计算后面9次的平均时间。另外一种更加使用的方式是收集所有的结果，然后计算“中位数”。基本上，它会将所有的结果排列起来，对结果进行排序，然后取中间的一个值。这是performance.now()函数如此有用的地方，因为无论你做什么，你都可以得到一个数值。
让我们再试一次，这次我们使用中位数函数：
JavaScript
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | var numbers = []; for (var i=0; i < 10; i++) { var t0 = performance.now(); makeHash('Peter'); var t1 = performance.now(); numbers.push(t1 - t0); }
function median(sequence) { sequence.sort(); // note that direction doesn't matter return sequence[Math.ceil(sequence.length / 2)]; }
console.log('Median time', median(numbers).toFixed(4), 'milliseconds'); |
缺陷 #4 – 以可预测的方式比较函数
我们已经理解衡量一些函数很多次并取平均值总会是一个好主意。而且，上面的示例告诉我们使用中位数要比平均值更好。
在实际中，衡量函数执行时间的一个很好的用处是来了解在几个函数中，哪个更快。假设我们有两个函数，它们的输入参数类型一致，输出结果相同，但是它们的内部实现机制不一样。
例如，我们希望有一个函数，当特定的字符串在一个字符串数组中存在时，函数返回true或者false，但这个函数在比较字符串时不关心大小写。换句话说，我们不能直接使用Array.prototype.indexOf方法，因为这个方法是大小写敏感的。下面是这个函数的一个实现：
我们可以立刻发现这个方法有改进的地方，因为haystack.forEach循环总会遍历所有的元素，即使我们可以很快找到一个匹配的元素。现在让我们使用for循环来编写一个更好的版本。
JavaScript
| 1 2 3 4 5 6 7 8 9 10 11 | function isIn(haystack, needle) { for (var i = 0, len = haystack.length; i < len; i++) { if (haystack[i].toLowerCase() === needle.toLowerCase()) { return true; } } return false; }
console.log(isIn(['a','b','c'], 'B')); // true console.log(isIn(['a','b','c'], 'd')); // false |
其实假设很简单，但是有些微妙。第一个函数使用了haystack.forEach方法，浏览器的JavaScript引擎会为它提供一些底层的优化，但是当我们使用数据索引技术时，JavaScript引擎没有提供对应的优化。这告诉我们：在真正测试之前，你永远不会知道。
（PHP开发、web前端、UI设计、VR开发专业培训机构--V客IT学院版权所有，转载请注明出处，谢谢合作！）
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
