Блог

Я играю с бенчмаркингом, чтобы увидеть, какую часть пирога занимает мой пользовательский javascript по сравнению с вещами, находящимися вне моего контроля, в том, что касается оптимизации: dom / network / painting и т. Д.

Я бы использовал для этого инструменты разработчика Chrome, но я не вижу точной круговой диаграммы, поскольку мои функции выполняют вызовы ajax, и поэтому network добавляется к части javascript pie (а также dom и другие вещи «вне моего контроля»).

Я использую benchmarkjs (http://benchmarkjs.com /) чтобы проверить эту строку: document.querySelector("#mydiv").innerHTML = template(data);

где template находится предварительно скомпилированный шаблон handlebars.

К вопросу…

Я разбил процесс на 3 части и взял среднее значение для каждого запуска:

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

Но все три вместе (одна строка выше) получается: 0.005539341673858488

Что меньше, чем единственный вызов set 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();
  

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

Оказывается, jit, вероятно, делает какую-то сумасшедшую фигню ….

Ответом было бы попытаться перехитрить его, но я думаю, что вместо этого мне следует скорректировать свою стратегию.