частые обновления данных для ractive.js

Question

Я думал о переписывании нашего устаревшего приложения, которое использует чистый jQuery. Он отображает данные журнала, которые он получает через websocket, он показывает только последние 100 записей, удаляя старые и добавляя новые.

Поскольку скорость рендеринга имеет значение, я сначала попытался отобразить случайные входящие данные, а Ractive - медленнее, чем наш код jQuery. По результатам тестов jQuery отображает 1000 записей за 15 секунд и версию Ractive за 30 секунд. (наш внутренний код подталкивает каждое событие с задержкой 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

С 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/.

Например, таймеры с открытыми инструментами разработчика будут влиять на время, потому что это консоль. Запуск каждого элемента, поэтому попробуйте без него.

Для любопытных, есть изменения, следующие в 0.8, которые будут отображаться до ~ 1ms за элемент.