브라우저 창에서 파이프 된 출력을 효율적으로 스크롤

Question

사용자 컴퓨터에서 로컬 프로세스를 호출하고 브라우저로 stdout을 파이프하는 사용자 지정 브라우저 플러그인 (FireBreath로 작성 됨)이 있는데이 프로세스를 실행하고 있습니다 popen() 호출을 통해 파이프에서 데이터를 읽으면 JSAPI 이벤트가 발생하고이를 브라우저로 다시 보냅니다.

브라우저에서 미리 포맷 된 텍스트로 div에 출력을 추가하고 div에 아래로 스크롤하도록 지시합니다. 브라우저 플러그인에

코드 :

FILE* in; 
if(!(in = _popen(command_string, "r"))) 
{ 
    return NULL; 
} 

while(fgets(buff, sizeof(buff), in)!=NULL) 
{ 
    send_output_to_browser(buff); 
} 

HTML & 자바 스크립트/jQuery를 :

이 방법에 내가 필요로하는 브라우저 (이 제한된 사용 내부 도구입니다) 작동

<pre id="sync_status_window" style="overflow:scroll"> 
    <span id="sync_output"></span> 
</pre> 


var onPluginTextReceived = function (text) 
{ 
    $('#sync_output').append(text); 
    var objDiv = document.getElementById('sync_status_window'); 
    objDiv.scrollTop = objDiv.scrollHeight; 
} 

, 그러나 그것은 초조하게 laggy하다. 내 프로세스는 일반적으로 출력 창에서 스크롤이 끝나기 30 ~ 60 초 정도 걸립니다. 그렇다면 이것을보다 효율적으로 만드는 방법은 무엇입니까? 이 텍스트를 브라우저로 다시 파이프하는 더 좋은 방법이 있습니까?

Answer 1

내가 잠재적 볼이 최적화가 있습니다

1. , 당신은
2. 덩어리 최대 출력 매우 비용이 많이 드는 DOM을 트리 검색을 계속 반복하여 사전 및 범위에 대한 참조를 유지하는이 - 중 C 쪽 (권장) 또는 JS 쪽.

   //Higher or global scope 
   var pluginBuffer=[]; 
   var pluginTimeout=false; 
   var sync_status_window=document.getElementById('sync_status_window'); 
   
   function onPluginTextReceived(text) 
   { 
       pluginBuffer[pluginBuffer.length]=text; 
       if (!pluginTimeout) pluginTimeout=window.SetTimeout('onPluginTimer();',333); 
   } 
   
   function onPluginTimer() 
   { 
       var txt=pluginBuffer.join(''); 
       pluginBuffer=[]; 
       pluginTimeout=false; 
       $('#sync_output').append(text); 
       sync_status_window.scrollTop = sync_status_window.scrollHeight; 
   } 
   

   은 여러분의 필요에 적응처럼 (수행해야 JQuery와에 대한 의존성을 제거하지 않고) 빠른 해킹에 대한

이 볼 수 있었다, 나는 두 번째 3 업데이트 /이는 것처럼 보일