ractive.js에 대한 데이터 업데이트가 자주 발생합니다.

Question

순수 jQuery를 사용하는 기존 앱을 다시 작성하려고했습니다. 그것은 websocket에 의해 가져 오는 로그 데이터를 렌더링합니다. 이전 로그를 제거하고 새 레코드를 추가하여 마지막 100 개의 레코드 만 표시합니다.

렌더링 속도가 중요하기 때문에 무작위로 들어오는 데이터를 렌더링하려고 시도했으며 Ractive는 jQuery 코드보다 두 배 느립니다. 벤치 마크를 통해 jQuery는 15 초 만에 1000 개의 레코드를 렌더링하고 30 초 만에 Ractive의 버전을 렌더링합니다. (백엔드 코드는 0.01 초 지연으로 각 이벤트를 푸시)

따라서 조정할 수있는 설정이 있습니까? 내가 사용하는 코드는 간단하다 :

Ractive 0.7와

 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

, 성능이 지금은 더 좋다. ~ 11 초에 실행되며 각 항목은 약 10ms입니다 (http://jsfiddle.net/aqe53ocm/ 참조).

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

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

     self.merge('items', copy); 

이 http://jsfiddle.net/56hfm4bt/를 참조하십시오

또한 merge 대신 두의 운영, pop 및 unshift를 사용하여 시도 할 수 있습니다.

예를 들어 dev 도구를 열어 놓은 타이밍은 console.time에 각 항목을 기록하기 때문에 시간에 영향을 미칩니다.

호기심에 대해서는 에 변경 사항이 있습니다.이 변경 사항은 항목 당 ~ 1ms까지 표시됩니다.