javascript - ractive.js 的频繁数据更新

Question

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

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

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

        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>

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。