Эффективная прокрутка конвейерного вывода в окне браузера - PullRequest
Новая
       56

Эффективная прокрутка конвейерного вывода в окне браузера

1 голос
/ 04 февраля 2012

У меня есть пользовательский плагин для браузера (построенный с 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: 

<code><pre id="sync_status_window" style="overflow:scroll">
    <span id="sync_output"></span>
var onPluginTextReceived = function (text) { $ ( '# Sync_output') добавляет (текст). var objDiv = document.getElementById ('sync_status_window'); objDiv.scrollTop = objDiv.scrollHeight; }

Этот метод работает для браузеров, в которых он мне нужен (это внутренний инструмент для ограниченного использования), но он крайне разочаровывает. Мой процесс обычно заканчивается за 30-60 секунд до того, как окно вывода заканчивает прокрутку. Итак, как мне сделать это более эффективным? Есть ли лучший способ передать этот текст обратно в браузер?

1 Ответ

2 голосов
/ 04 февраля 2012

Есть две оптимизации, в которых я вижу потенциал:

  1. сохраните ссылку на свой пре и промежуток, вы продолжаете повторять дом поиск дерева, что довольно дорого
  2. Разделите вывод - либо на стороне 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;
 }

Приспосабливайтесь к вашим потребностям, я выбрал 333 мсек для 3 обновлений в секунду

...