Chrome中的DOM更新速度比firefox看起來像chrome有一些渲染問題

Question

我編寫了一個在DOM中轉儲大量節點的代碼。 當我在firefox中加載它時它會在2-3秒內渲染但在chrome（版本：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 - window.scroll方法攔截DOM渲染 ”它開始工作，但現在再次無法正常工作。請提出建議。 任何幫助表示贊賞。 坦克大小先謝謝:)

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：加速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);