Ember iteration performance helper

measure-performance.js

import Ember from 'ember';

const store = {};

const makeRelative = function(collection) {
  return collection.reduce(function(acc, i) {
    if (acc.last) {
      acc.diffs.push(i - acc.last);
    }

    acc.last = i;
    return acc;
  }, { last: null, diffs: [] }).diffs;
};

const sum = _.partialRight(_.reduce, (acc, i) => acc + i);
const avg = (collection) => sum(collection) / collection.length;

const printMeasurements = function(label, timings) {
  const relativeTimings = makeRelative(timings);
  const avgTime = Math.round(avg(relativeTimings));
  console.info(`Avg iteration time for ${label} : ${avgTime}ms (${timings.length} measurements)`);
};

export function measurePerformance(label, { wait = 500 } = {}) {
  const measurements = store[label] = store[label] || {
    timings: [],
    runReport: _.debounce(function() {
      printMeasurements(label, measurements.timings);
      measurements.timings = [];
    }, wait)
  };

  measurements.timings.push(performance.now());
  measurements.runReport();
}

export default Ember.Handlebars.makeBoundHelper(measurePerformance);

measure-performance.md

Use the measure-performance helper inside a loop to measure the time for each iteration with an optional wait param that will be used to determine when iterations have completed.

{{#each thing in |things|}}
  {{measure-performance 'each thingy'}}
  
  {{thingy-component thing}}
{{/each}}

Will log the following to your console:

Avg iteration time for render thingy : 33ms (8 measurements)