New Twiddle

components.performant-each.js

import Ember from 'ember';

export default Ember.Component.extend({
  internalTag: 'div',
  init() {
  	this._super(...arguments);
    this.fragment = document.createElement(this.internalTag);
  },
  addFragmentToDom: Ember.computed(function(){
    this.element.appendChild(this.fragment);
  	return '';
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
    itemsCount: 5000,
  shouldRenderItems: false,
  items: Ember.computed('itemsCount', function(){
  	return new Array(parseInt(this.itemsCount)).fill(null).map((e, i)=>{ return { id: i }; });
  }),
});

templates.application.hbs

  {{#performant-each items=this.items as |item|}}
  	<div>{{item.id}}</div>
  {{/performant-each}}

templates.components.performant-each.hbs

{{#-in-element this.fragment}}
  {{#each this.items as |item index|}}
    {{yield item index}}
  {{/each}}
{{/-in-element}}
{{this.addFragmentToDom}}

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"
  }
}