4

I was thinking on rewriting our legacy app which is using pure jQuery. It renders log data which it gets by websocket, it shows only last 100 records by removing old ones and appending new ones.

Because rendering speed matters, I've tried first to render random incoming data and Ractive's twice slower than our jQuery code. By benchmarks jQuery renders 1000 records in 15 seconds and Ractive's version in 30 seconds. ( our backend code pushes each event with 0.01 s delay )

Thus I wonder is there any tweak settings? The code I use is simple:

        var LogApp = Ractive.extend({
          template: '#items',

          init: function() {
            var self = this;

            socket.bind("logs", function(data_raw) {
              var data = JSON.parse(data_raw);

              if (self.data.items.length > 100) {
                self.pop('items');
              }

              self.unshift('items', data);
            });

          }

        });

        var ractive = new LogApp({
          el: react,
          data: {
            items: []
          }
        });
<script id='items' type='text/ractive'>
  {{#each items:i}} {{>item}} {{/each}}
</script>

<script id='item' type='text/ractive'>
  <tr>
    <td>{{id}}</td>
    <td>{{log_level}}</td>
    <td>{{log_message}}</td>
  </tr>
</script>
nateless
  • 475
  • 6
  • 23
  • I messed around a bit and got it down to 18 seconds, but still slower than the update refresh rate (10 seconds). Going to use this to help drive some performance improvements. – martypdx Feb 11 '15 at 15:19
  • Can you provide any code example how you could faster it to 18 seconds which is almost twice faster than my code? – nateless Mar 04 '15 at 13:07
  • Sorry for the long delay @nateless. Answer posted below. – martypdx Mar 13 '15 at 16:33

1 Answers1

2

With Ractive 0.7, performance is now better. It performs at ~11 seconds, with each item being about 10ms (See http://jsfiddle.net/aqe53ocm/).

You can also try using a merge instead of two operations, pop and unshift:

        var copy = self.get('items').slice();

        if (copy.length > 100) {
            copy.pop();
        }
        copy.unshift(data);

        self.merge('items', copy);

See http://jsfiddle.net/56hfm4bt/.

For example and timings having the dev tools open will impact times because it's console.time logging each item, so try without.

For the curious, there are changes coming in 0.8 that will spead this up to ~1ms per item.

martypdx
  • 3,702
  • 14
  • 22