我写了一段代码,可以在 DOM 中转储大量节点。当我在 firefox 中加载它时,它会在 2-3 秒 中呈现,但在 chrome (ver: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” 它开始工作,但现在又不工作了。请提出一些建议。 任何帮助表示赞赏。水箱尺寸提前致谢:)
最佳答案
如果我理解你的代码,你有一个数组,你想用 span 绑定(bind)在一起。您可以删除 for()
从您的代码(以及其中的模数(=slow)),节省大量时间:
htmlString = '<span>'+ fileLines.join("</span><span>") +'</span>';
那不会显示 i
号码,但您可以切换到 li
的并使用数字而不是项目符号。
这也可能有效:
var fileLines = '<span>'+ data.replace('\n', '</span><span>') +'</span>';
这有点乱(这可能以 </span><span></span>
结尾,你需要 trim \n
来修复它(很容易做到)),但它不必将它变成一个数组,这应该加快速度
关于javascript - chrome 中的 DOM 更新比 firefox 慢看起来像 chrome 有一些渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22475990/