New Twiddle

components.performant-each.js

import Ember from 'ember';

export default Ember.Component.extend({
  chunkedItems: Ember.computed('items', function(){
  	return this.items;
  }),
  fragment:  document.createDocumentFragment(),
  init() {
    this._super(...arguments);
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        //console.log(mutation);
      });    
    });


  var config = { attributes: true, childList: true, subtree: true, characterData: true };

  observer.observe(document.getElementById('mutations'), config);
  }
});

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 }; });
  }),
  
  actions: {
  	renderItems() {
     	this.toggleProperty('shouldRenderItems'); 
    }
  }
});

helpers.append-fragment.js

import Ember from 'ember';

export function appendFragment([fragment, node]/*, hash*/) {
  console.log('appendFragment', fragment, node);
  node.appendChild(fragment);
  return '';
}
export default Ember.Helper.helper(appendFragment);

helpers.console-time-end.js

import Ember from 'ember';

export function consoleTimeEnd([name]/*, hash*/) {
  console.timeEnd(name);
  return '';
}

export default Ember.Helper.helper(consoleTimeEnd);

helpers.console-time.js

import Ember from 'ember';

export function consoleTime([name]/*, hash*/) {
  console.time(name);
  return '';
}

export default Ember.Helper.helper(consoleTime);

helpers.fragment-for-node.js

import Ember from 'ember';

export function fragmentForNode(params/*, hash*/) {
  return document.createDocumentFragment();
}

export default Ember.Helper.helper(fragmentForNode);

templates.application.hbs

{{input value=this.itemsCount}}
<button {{action 'renderItems' this.itemsCount}}> render {{this.itemsCount}} items </button>

{{#if this.shouldRenderItems}}


<div id="mutations">
	{{console-time "fast"}}
  {{#performant-each items=this.items as |item|}}
  	<div>{{item.id}}</div>
  {{/performant-each}}
  {{console-time-end "fast"}}

   {{console-time "slow"}}
   {{#each this.items as |result|}}
       <div>{{result.id}}</div>
   {{/each}}
   {{console-time-end "slow"}}

</div>
 

{{/if}}

templates.components.performant-each.hbs

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

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