Question

我编写了一个在DOM中转储大量节点的代码。当我在 firefox 中加载时，它会在 2-3秒中呈现，但在 chrome（版本：33）中会冻结UI并呈现< em>很长时间（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 - window.scroll method intercepts DOM Rendering” 它开始起作用，但现在再次起作用。请提出建议。任何帮助表示赞赏。坦克大小提前感谢：）

Answer 1

如果我理解你的代码，你就有了一个你希望用跨度绑定在一起的数组。您可以从代码中删除for()（以及其中的模数（=慢）），从而节省大量时间：

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

这不会显示i号码，但您可以切换到li并使用数字代替子弹。

这也可能有效：

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

这是一个更麻烦的事情（这可能会以</span><span></span>结束，你需要修剪\n来修复它（容易做到）），但它不必将它变成一个数组，这应该加快速度

Answer 2

看看你是否可以避免在此功能下使用append到html

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

并且代码的最后只有一个append。您希望限制DOM操作 - 它会通过触发多个浏览器重排来影响浏览器性能。

Google Dev: Speeding up JavaScript: Working with the 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);

Chrome中的DOM更新速度比firefox看起来像chrome有一些渲染问题

2 个答案: