javascript - Benchmarking: parts don't add up to the whole -

javascript - Benchmarking: parts don't add up to the whole -

i'm playing around benchmarking in order see how much of pie custom javascript takes vs things out of command far optimization concerned: dom/network/painting, etc.

i utilize chrome's dev tools this, don't see accurate pie chart since functions ajax calls , hence network added javascript portion of pie (as dom , other 'out of control' stuff).

i'm using benchmarkjs (http://benchmarkjs.com/) test line: document.queryselector("#mydiv").innerhtml = template(data);

where template precompiled handlebars template.

to question...

i've broken process downwards 3 parts , took mean of each run:

document.queryselector("#mydiv") - 0.00474178430265463 mydiv.innerhtml = already_called_template - 0.005627522903454419 template(data) - 0.004687963725254854

but 3 (the 1 liner above) turns out be: 0.005539341673858488

which less lone phone call set innerhtml.

so why don't parts equal sum? doing wrong?

sample benchmark below (i'm using deferred constant because plan add together ajax next):

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();

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

turns out jit doing crazy sh.... stuff.

the reply seek outsmart it, think should adjust strategy instead.

javascript performance optimization benchmarking