使用.html(字符串)的Jquery速度真的很慢,我怎样才能加快速度呢？

Question

使用.html(字符串)的Jquery速度真的很慢,我怎样才能加快速度呢？

Jus*_*808 6 javascript optimization jquery

我有一个平均需要250毫秒才能完成的功能.我想在更短的时间内完成这项工作,如果我能<10ms,那么<20ms就是最好的.

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 += '<br />';
    }
    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));
}

Run Code Online (Sandbox Code Playgroud)

我在a侧调用此函数setInterval来更新我的显示,构建html字符串是每帧0ms到1ms,但更新html是100ms到300ms之间的任何地方.反正有没有让它更快？

Bah,有铬检查员打开观看控制台增加了一个巨大的延迟 这是我目前的功能(基本上是从CD桑切斯下降).没有检查员打开它在大约50ms运行更新html.这要好得多,但如果可以的话,我希望能达到<20ms.

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('<br />');
    }
    var create = new Date().getTime();
    this.innerHTML = html.join(''); // use innerHTML
    var end = new Date().getTime();
    $('#debug').html('Build html: ' + (create-start) + '<br/>Update html: ' + (end-create));
}

Run Code Online (Sandbox Code Playgroud)

html的示例值 - 第1行,最多为<br>

<span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">?</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><span style="background-color:#000000;color:#ffffff;">&nbsp;</span><br>

Run Code Online (Sandbox Code Playgroud)

示例 - 此处,目前仅在chrome中测试过.已知在IE中工作的结......

更新我已将我的代码转换为使用画布并直接绘制到该代码.我不确定我是不是最好的方式,因为它是我第一次使用画布.现在看,我大约20ms.那就是我高兴的地方的上端,但10ms会好得多.

我不确定我是否可以在样式中定义前景色和背景色以及是否删除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));
}

Run Code Online (Sandbox Code Playgroud)

最后更新 ctx.fillText速度很慢,不够准确,不适合我的目的.我已将自己的字体定义为8x16数组,并使用a绘制每个像素ctx.fillRect.这要快得多,并处理它接缝的字体子系统.

Answer 1

Cri*_*hez 1

这里有一些非常小的优化，我怀疑它们会有多大帮助，但无论如何，你可以这样做：

function updateDisplay() {
    var start = new Date().getTime();
    var $this = $(this);
    var data = $this.data('ansi');
    var html = [];
    for (var i = 0, length1 = data.screen.length; i < length; ++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('<br />');
    }
    var create = new Date().getTime();
    console.log('Build html: ' + (create-start));
    this.innerHTML = html.join(''); // use innerHTML
    var end = new Date().getTime();
    console.log('Update html: ' +(end-create));
}

Run Code Online (Sandbox Code Playgroud)

当然，这些只是简单的 JavaScript 优化（在较新的浏览器上并不是那么有用）。听起来您需要简化 HTML，可能还需要简化 CSS，以便 HTML 引擎可以更快地呈现它。

归档时间：	14 年，9 月前
查看次数：	2785 次
最近记录：	14 年，9 月前