在瀏覽器窗口中高效滾動管道輸出

我有一個自定義瀏覽器插件（使用FireBreath構建），它將調用用戶計算機上的本地進程並將管道標準輸出返回瀏覽器，以執行此操作，通過popen（）調用，並且當我從管道讀取數據時，我會觸發JSAPI事件並將其發送回瀏覽器。在瀏覽器窗口中高效滾動管道輸出

在瀏覽器中，我將輸出附加到格式爲預格式的文本並告訴div滾動到底部。

代碼在瀏覽器插件：

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

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

HTML &使用Javascript/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; 
}

此方法適用於我需要它的瀏覽器（這是限制使用的內部工具），但是這是令人沮喪的。我的過程通常在輸出窗口結束滾動之前約30-60秒完成。那麼，我該如何讓這更高效呢？有沒有更好的方法將這些文本傳回給瀏覽器？

來源

2012-02-03 Fraser Graham

有兩個優化，我看到潛力：

保留到您預先和跨度的參考，你不斷重複的DOM 樹搜索，這是相當昂貴的
組塊了輸出 - 要麼在C側（優選）或JS 側。

爲了快速破解（無需拆卸jQuery的依賴，這應該做的）可能看起來像

//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; 
}

適應您的需求，我選擇了333ms 3次更新/秒

來源

2012-02-03 21:37:20

這些看起來像一個合理的開始地點;然而，我懷疑這個問題更多的是跨進程的溝通。我會添加一些日誌記錄並進行一些分析，以查看大部分「滯後」發生的情況。 – taxilian 2012-02-04 07:14:58

我在C端分塊並緩存了DOM查找，現在更流暢了。 – 2012-02-07 21:23:29

在瀏覽器窗口中高效滾動管道輸出

回答

相關問題