在浏览器窗口中高效滚动管道输出

发布于 2025-01-01 21:41:58 字数 864 浏览 1 评论 0原文

我有一个自定义浏览器插件（使用 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 & 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 秒。那么，我该如何提高效率呢？有没有更好的方法将此文本传输回浏览器？

原文

I have a custom browser plugin (built with FireBreath) that will invoke a local process on a users machine and pipe stdout back to the browser, to do this i'm running the process through a popen() call and as I read data from the pipe I fire a JSAPI event and send it back to the browser.

In the browser I append the output to a div as pre-formatted text and tell the div to scroll to the bottom.

Code in the browser plugin:

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

This method works for the browsers I need it to (this is a limited use internal tool), but it's frustratingly laggy. My process usually finishes about 30-60 seconds before the output window finishes scrolling. So, how do I make this more efficient? Is there a better way to pipe this text back to the browser?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赴月观长安 2025-01-08 21:41:58

我认为有两个优化潜力：

保留对 pre 和 span 的引用，不断重复 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 次更新

There are two optimizations I see potential in:

keep a reference to your pre and span, you keep repeating the dom
tree search , which is quite costly
Chunk up the output - either on the C side (preferable) or on the JS
side.

For quick hack (without removing dependency on jquery, which should be done) could look like

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

Adapt to your needs, I chose 333ms for 3 updates/second

回复收藏 0 原文

~没有更多了~