New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  rawRender: false,
  refRender: false,
  items: null,
  actions: {
  	expand(name) {
      this.set('items', new Array(200).fill(null)),
    	this.set(name, true);
    },
    clean() {
    	this.setProperties({
        rawRender: false,
        refRender: false
      })
    }
  }
});

helpers.time.js

import Ember from 'ember';

export function time([a,b]/*, hash*/) {
  if (a === 'end') {
  	console.timeEnd(b);
  } else {
   	console.time(a); 
  }
  return '';
}

export default Ember.Helper.helper(time);

templates.application.hbs

<button {{action 'expand' 'refRender'}}>Render with reference</button>
<button {{action 'expand' 'rawRender'}}>Render without reference</button>
<button {{action 'clean'}}>Clean</button>
{{#if this.rawRender}}
	{{time 'rawRender'}}
  <ul>
	{{#each this.items as |item index|}}
  <li> <span></span> </li>
  {{/each}}
  </ul>
  {{time 'end' 'rawRender'}}
{{/if}}
{{#if this.refRender}}
	{{time 'refRender'}}
  <ul>
	{{#each this.items as |item index|}}
  <li>{{index}}<span></span>{{index}}</li>
  {{/each}}
  </ul>
  {{time 'end' 'refRender'}}
{{/if}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}