javascript - 标杆管理:部分加起来不等于整体

Question

我正在尝试基准测试，以了解我的自定义 javascript 占用了多少份额，以及就优化而言超出我控制范围的内容:dom/network/painting 等。

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

我正在使用 benchmarkjs ( http://benchmarkjs.com/ ) 来测试这一行: document.querySelector("#mydiv").innerHTML = template(data);

其中template是预编译的 Handlebars 模板。

对于这个问题...

我将这个过程分为 3 个部分，并取每次运行的平均值:

1. document.querySelector("#mydiv") - 0.00474178430265463
2. myDiv.innerHTML =已经_叫_模板 - 0.005627522903454419
3. 模板(数据) - 0.004687963725254854

但这三个加在一起(上面的一行)结果是:0.005539341673858488

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

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

<小时/> 下面的示例基准(我使用 deferred 作为常量，因为我计划接下来添加 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 可能正在做一些疯狂的事情。

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