jQuery的速度，使用.htmlstring真的很慢，如何加快速度？

问题描述

| 我有一个平均需要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));
}

我在

setInterval

边调用此函数来更新我的显示，每帧创建html字符串的范围是0ms到1ms，但是更新html的范围是100ms到300ms。无论如何，要使它更快？ Bah，打开了Chrome检查器以观看控制台，这大大增加了延迟 这是我当前的功能（如果从CD Sanchez下载，则基本上是一个滴）。在没有打开检查器的情况下，更新html的运行时间约为50毫秒。这要好得多，但如果可以的话，希望将它缩短到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));
}

html的样本值-第一行，最多

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

示例-到目前为止，仅在chrome中进行过测试。已知的结在IE中可以使用... 更新资料 我已经将代码转换为使用画布并直接在其上绘制。我不确定我是不是以最佳方式做到这一点，因为这是我第一次使用画布。现在，我大约20毫秒。那就是我最高兴的地方，不过10ms会更好。 我不确定是否可以在样式中定义前景色和背景色并删除

fillRect

调用，如果可以的话，可以大大加快速度。另一个问题是字体看起来不像纯HTML那样清晰，我不确定是否可以修复。上面链接的示例已更新。

function updateDisplay() {
    var start = new Date().getTime();
    var $this = $(this);
    var data = $this.data(\'ansi\');
    for (var i = 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

绘制每个像素。这要快得多，并且可以处理它接缝的字体子系统。     

解决方法

        以下是一些非常小的优化，我怀疑它们是否会对您有很大帮助，但是无论如何您都可以在这里进行：

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

当然，这些只是简单的JavaScript优化（在较新的浏览器中并没有那么有用）。听起来您需要简化HTML以及可能的CSS，以便HTML引擎可以更快地呈现它。     ,        为了理解这种问题，我发现Dynatrace Ajax Edition是最好的工具，因为它还可以告诉您花了多少时间进行渲染，而不仅仅是JavaScript执行。我可能还会发现其他类似的工具不错。 我认为您可能需要重新考虑整个方法。编写HTML元素以创建动画绝不是一个好主意。这就是我们拥有canvas，svg和flash / silverlight之类的原因。有可能在某种程度上进行优化，但是请改用正确的工具。也许不是您要找的答案，但是我认为您将对最终结果感到满意，无论是在性能方面，还是在例如使用canvas或svg的可维护性方面。 http://raphaeljs.com/reference.html#text是一个不错的库 更新1： 如果您真的想用这种方法，我会尝试稍微改变一下方法。现在，您每次都重新绘制整个\“ grid \”。查看动画，看来您每次只能更新一行。我认为您可以将每一行都包装在div中，并且对于每一帧，您只需要重写该行上div的内容。我会将对div的引用存储在数组中，以便避免在每个帧上运行选择器。     ,        您确定问题出在实际附加数据而不渲染数据上吗？如果您的标记很复杂（可能有10个，具体取决于多少个标记），那么新标记的渲染时间就可以忽略不计。如果将通话从

.html(html)

更改为

.text(html)

，时间会怎样？ 我不建议您将此操作作为最终解决方案（

text

不会解析HTML标记），但是它可以帮助您了解是否花费了时间进行渲染或追加。     ,        尚未测试，但假设

data.screen[i]

是字符串数组，也许使用

join

函数可以加快速度： （循环）

for (var i = 0; i < data.screen.length; i++) {
        html += data.screen[i].join(\"\");
    html += \'<br />\';
}

连接一个字符串可能看起来很简单，但是每次使用ѭ17every都会创建一个新的字符串对象。我建议使用类似

StringBuffer

的东西。 编辑： 好的，在示例代码中，您尝试每几毫秒替换数千行html，每次仅更改一个字符。如果您每次只更改一个字符，则可以将延迟降低约99％