computed.sort vs. sortBy

components.computed-sort.js

import Ember from 'ember';
import Performance from '../performance';

export default Ember.Component.extend(Performance, {
  dataSorting: ['string'],
  dataSorted: Ember.computed.sort('data', 'dataSorting')
});

components.sort-by.js

import Ember from 'ember';
import Performance from '../performance';

export default Ember.Component.extend(Performance, {
  dataSorted: Ember.computed('data', function() {
    return this.get('data').sortBy('string');
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  data1: Ember.computed(function() {
  	// create array with id and random string
    let data = [];
    for (let i = 0; i < 2000; i++) {
      const randomString = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
      data.push({id: i, string: randomString});
    }
    return data;
  }),
  
  data2: Ember.computed(function() {
  	// create array with id and random string
    let data = [];
    for (let i = 0; i < 2000; i++) {
      const randomString = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
      data.push({id: i, string: randomString});
    }
    return data;
  })
});

performance.js

import Ember from 'ember';

export default Ember.Mixin.create({
  tStart: 0,
  tEnd: 0,
  
  deltaT: Ember.computed('tStart', 'tEnd', function() {
    const { tStart, tEnd } = this.getProperties('tStart', 'tEnd');
    return Math.round((tEnd - tStart)*100)/100;
  }),
  
  init() {
   this.set('tStart', performance.now());
   this._super(...arguments);
  },
  
  didInsertElement() {
    this._super(...arguments);
    this.set('tEnd', performance.now());
  }
})

templates.application.hbs

<h1>computed.sort vs. sortBy</h1>
<br>
<h2>computed.sort</h2>
{{computed-sort data=data2}}
<br>
<h2>sortBy</h2>
{{sort-by data=data1}}

templates.components.computed-sort.hbs

sort time: <b>{{deltaT}} ms</b> for {{dataSorted.length}} items

templates.components.sort-by.hbs

sort time: <b>{{deltaT}} ms</b> for {{dataSorted.length}} items

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}