DOM更新在chrome中的速度比firefox看起来要慢，看起来chrome有一些呈现问题
DOM更新在chrome中的速度比firefox看起来要慢，看起来chrome有一些呈现问题
提问于 2014-03-18 10:05:32
我已经编写了一个代码，它在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 window.scroll方法拦截DOM呈现“--它开始起作用了，但现在它不再起作用了-- .Please提出了一些建议。任何帮助都是非常感谢的。油箱尺寸预先多谢:)
回答 2
Stack Overflow用户
发布于 2014-03-18 11:30:07
如果我理解您的代码，您将有一个数组，您希望将其与spans绑定在一起。您可以从代码中删除for() (以及代码中的模数(=slow) )，这样可以节省大量时间：
htmlString = '<span>'+ fileLines.join("</span><span>") +'</span>';这将不会显示i号码，但是您可以切换到li，使用数字而不是符号。
这也可能奏效：
var fileLines = '<span>'+ data.replace('\n', '</span><span>') +'</span>';这有点麻烦(这可能以</span><span></span>结尾，您需要修剪\n来修复这个问题(很容易))，但是它不需要将其转换成一个数组，这样就可以加快速度。
Stack Overflow用户
发布于 2014-03-18 13:53:17
查看是否可以在此函数下避免append到html。
if ((i % 1000) == 0) {
$("#textPlace").append(htmlString);
htmlString = '';
}并且在代码的末尾只有一个append。您希望限制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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22475990
复制相关文章
相似问题
腾讯云开发者
