chrome的DOM更新速度比firefox慢，看起来chrome有一些渲染问题

DOM Update slow in chrome than firefox looks like chrome has some rendering issues

本文关键字：chrome 问题 看起来 DOM 更新 速度 firefox      更新时间：2023-09-26

我写了一个代码，在DOM中转储大量节点。当我在firefox中加载它时，它呈现在2-3秒，但在chrome (ver:33)它冻结UI和呈现需要很长时间(8-10秒)。

$.ajax({
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total * 100;
                $("#fetchProgress").attr("value", percentComplete);
            }
        }, false);
        return xhr;
    },
    type: 'GET',
    url: "/GetSomething",
    data: {},
    success: function (data) {
        ///process and dump to DOM//
        var fileLines = data.split(''n');
        var htmlString = '';
        for (var i = 0; i < fileLines.length; i++) {
            htmlString += '<span>' + (i + 1) + '. ' + fileLines[i]+</span>;
            if ((i % 1000) == 0) {
                $("#textPlace").append(htmlString);
                htmlString = '';
            }
        }
        fileLines = null;
        $("#textPlace").append(htmlString);
    }
});

我从互联网上了解到chrome有一些渲染错误，并尝试从这个URL破解。"Chrome Bug -窗口。滚动方法拦截DOM渲染它开始工作了，但现在又不工作了。请提出建议。任何帮助都是感激的。油箱尺寸提前感谢:)

如果我理解你的代码，你有一个数组，你想与跨度捆绑在一起。您可以从代码中删除for()(以及其中的模数(=slow))，从而节省大量时间:

htmlString = '<span>'+ fileLines.join("</span><span>") +'</span>';

这将不显示i的数字，但你可以切换到li的数字，而不是子弹头。

这个也可以:

var fileLines = '<span>'+ data.replace(''n', '</span><span>') +'</span>';

这是有点混乱(这可能在</span><span></span>结束，你需要修剪'n的修复(容易做到))，但它不需要把它变成一个数组，这应该加快事情

查看是否可以在此函数下避免append to html 

            if ((i % 1000) == 0) {
                $("#textPlace").append(htmlString);
                htmlString = '';
            }

和只有一个append在你的代码的最后。你想限制DOM操作——它会触发多个浏览器流，从而影响浏览器性能。

Google Dev:加速JavaScript:使用DOM

从上面的链接中取出来，你可以用这样的东西来代替

var anchor, fragment = document.createDocumentFragment();
  for (var i = 0; i < 10; i ++) {
    anchor = document.createElement('a');
    anchor.innerHTML = 'test';
    fragment.appendChild(anchor);
  }
  element.appendChild(fragment);
相关文章：