频繁更新主动.js的数据

frequent data update for ractive.js

本文关键字：js 数据 更新      更新时间：2023-09-26

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

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

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

        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>

使用反应式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。

相关文章：