Скорость JQuery при использовании .html (строка ) действительно очень медленный, как мне это ускорить?

У меня есть функция, выполнение которой в среднем занимает 250 мсек. Я хотел бы сделать это за гораздо меньшее время,

function updateDisplay() {
    var start = new Date().getTime();
    var $this = $(this);
    var data = $this.data('ansi');
    var html = '';
    for (var i = 0; i < data.screen.length; i++) {
        for (var j = 0; j < data.screen[i].length; j++) {
            html += data.screen[i][j];
        }
        html += '
';
    }
    var create = new Date().getTime();
    console.log('Build html: ' + (create-start));
    $this.html(html);
    var end = new Date().getTime();
    console.log('Update html: ' +(end-create));
}

Я вызываю эту функцию на стороне setInterval , чтобы обновить мой дисплей, создав строку html составляет от 0 мс до 1 мс для каждого кадра, но html обновления составляет от 100 до 300 мс. Есть ли способ сделать это быстрее?

Ба, открытие Chrome Inspector для просмотра консоли добавляло огромную задержку создание строки html составляет от 0 мс до 1 мс для каждого кадра, но обновление html составляет от 100 до 300 мс. Есть ли способ сделать это быстрее?

Ба, открытие Chrome Inspector для просмотра консоли добавляло огромную задержку создание строки html составляет от 0 мс до 1 мс для каждого кадра, но обновление html составляет от 100 до 300 мс. Есть ли способ сделать это быстрее?

Ба, открытие Chrome Inspector для просмотра консоли добавляло огромную задержку Это моя текущая функция (в основном капля с CD Sanchez). Без открытого инспектора Он работает около 50 мсек для обновления html. Это намного лучше, но я бы хотел, чтобы оно составляло

function updateDisplay() {
    var start = new Date().getTime();
    var $this = $(this);
    var data = $this.data('ansi');
    var html = Array();
    for (var i = 0, length1 = data.screen.length; i < length1; ++i) {
        var a = data.screen[i]; // cache object
        for (var j = 0, length2 = a.length; j < length2; ++j) {
            html.push(a[j]); // push to array
        }
        html.push('
');
    }
    var create = new Date().getTime();
    this.innerHTML = html.join(''); // use innerHTML
    var end = new Date().getTime();
    $('#debug').html('Build html: ' + (create-start) + '
Update html: ' + (end-create));
}

Пример значения html - 1-я строка, до


      ┌─────────────────────────────────────────────────────────────────┐       

Пример - здесь , пока тестировалось только в хроме. Известен узел для работы в IE ...

Обновление Я преобразовал свой код, чтобы использовать холст и рисовать прямо на нем. Я не уверен, что делаю это наилучшим образом или нет, поскольку я впервые использую холст. В настоящее время у меня около 20 мс. Это верхний предел того, где я счастлив, хотя 10 мс было бы намного лучше.

Я не уверен, смогу ли я определить цвет переднего плана и фона в стиле и удалить вызов fillRect или нет, это бы сильно ускорило работу, если бы я мог. Другая проблема заключается в том, что шрифт не выглядит таким четким, как чистый html, не уверен, смогу ли я это исправить или нет. Приведенный выше пример был обновлен.

function updateDisplay() {
    var start = new Date().getTime();
    var $this = $(this);
    var data = $this.data('ansi');
    for (var i = 0, length1 = data.screen.length; i < length1; ++i) {
        var a = data.screen[i]; // cache object
        for (var j = 0, length2 = a.length; j < length2; ++j) {
            data.ctx.fillStyle = a[j][0];
            data.ctx.fillRect (8*j, 14 * i, 8, 14);
            data.ctx.fillStyle = a[j][1];
            data.ctx.fillText(a[j][2], 8*j, 14 * i);
        }
    }
    var end = new Date().getTime();
    $('#debug').html('Frame Time: ' + (end-start));
}

Последнее обновление ctx.fillText довольно медленное и недостаточно точное для моих целей. Я определил свой собственный шрифт как массив 8x16 и нарисовал каждый пиксель с помощью ctx.fillRect . Это намного быстрее и работает с подсистемой шрифтов, которую он склеивает.