Frequent data update for ractive.js

Question

I was thinking of rewriting our legacy application that uses pure jQuery. It displays the log data that it receives through websocket, it shows only the last 100 entries, deleting the old and adding new ones.

Since rendering speed matters, I first tried displaying random input and Ractive twice slower than our jQuery code. According to the test results, jQuery displays 1000 records in 15 seconds and the active version in 30 seconds. (our internal code pushes every event with a delay of 0.01 s)

So I am wondering if there are any settings settings? The code I'm using 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>

Run code

Answer 1

Ractive 0.7 . ~ 11 , 10 (. http://jsfiddle.net/aqe53ocm/).

merge , pop unshift:

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

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

        self.merge('items', copy);

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

, , , , console.time , .

0.8, ~ 1ms .