基准测试：零件不会累加到整体

Question

我正在玩基准测试，以便了解我的自定义javascript占用了多少馅饼，而不是优化所涉及的东西：dom / network / painting等。

我会使用chrome的开发工具，但我没有看到准确的饼图，因为我的函数执行ajax调用，因此网络被添加到馅饼的javascript部分（以及dom和其他“我无法控制的东西”。

我使用benchmarkjs（http://benchmarkjs.com/）测试此行：  document.querySelector("#mydiv").innerHTML = template(data);

其中template是预编译的把手模板。

问题......

我已经将这个过程分解为3个部分并取了每次运行的平均值：

1. document.querySelector("#mydiv") - 0.00474178430265463
2. myDiv.innerHTML = already_called_template - 0.005627522903454419
3. template(data) - 0.004687963725254854

但所有三个（上面的一个班轮）原来是：0.005539341673858488

这比设置innerHTML的单独调用少。

那么为什么这些部分不等于总和呢？我做错了吗？




<小时/> 下面的示例基准（我使用延迟作为常量，因为我计划接下来添加ajax）：

var template = Handlebars.compile(html);
var showStats = function(e) { console.log(e.target.stats.mean); };
var cachedDiv = document.querySelector('#myDiv');
var cachedTemplate = template(data);

new Benchmark('just innerHTML', function(deferred) {
  cachedDiv.innerHTML = cachedTemplate;
  deferred.resolve();
}, {defer: true, onComplete: showStats}).run();

new Benchmark('full line', function(deferred) {
  document.querySelector('#myDiv').innerHTML = template(users);
  deferred.resolve();
}, {defer: true, onComplete: showStats}).run();

Answer 1

http://mrale.ph/blog/2012/12/15/microbenchmarks-fairy-tale.html

原来，jit可能正在做一些疯狂的事情。

答案是尝试超越它，但我认为我应该调整我的策略。