Question

我正在考虑重写使用纯jQuery的遗留应用程序。它呈现由websocket获取的日志数据，它通过删除旧记录并附加新记录来显示最后100条记录。

由于渲染速度很重要，我首先尝试渲染随机传入数据，而Ractive的速度比我们的jQuery代码慢两倍。通过基准测试，jQuery在15秒内呈现1000条记录，在30秒内呈现Ractive版本。（我们的后端代码以0.01秒的延迟推送每个事件）

因此我想知道是否有任何调整设置？我使用的代码很简单：

＆＃13;

        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: []
          }
        });

＆＃13;

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

＆＃13;

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。

ractive.js的频繁数据更新

1 个答案: