使用 innerHTML idea 添加大量 html 元素的最佳方法是什么？

Question

不是在 Chrome 上，而是在 Firefox 上，每次我发出 ajax 请求时浏览器都会冻结。

这是交易...

ajax 请求收到一个巨大的 html，长度超过 75,000。

<div> ... <table> ... etc ... </table> ... </div>

所以我开始使用替换来获得更好的东西：

var html = data.replace(/\r?\n|\r/g, '').replace(/\s{2,}/g, ' ')

比我55000还不够

所以我一直在寻找，但直到现在我没有任何帮助。

这是我尝试过的：

1.

asyncInnerHTML(html, function(fragment){
     $(tab).get(0).appendChild(fragment); // myTarget should be an element node.
});

2.

var node = document.createTextNode(html);
$(tab).get(0).innerHTML = node;

3.

$(tab).get(0).innerHTML = html;

4.

$(tab).append(html);

5.

$(tab).html(html);

唯一比第二个快的是 javascript 添加 nodeContent，当然这不是我想要的，因为我需要呈现 HTML 而不是 html 格式为 text/string。

希望有人能帮助我。

无论如何，谢谢。

Answer 1

这是一段代码，它从您的 table HTML 中解析出行，然后一次添加一个，以便浏览器在解析您的 [=19= 时有更多的喘息时间].此解析逻辑特定于您的 HTML 并对此做出一些假设 HTML:

function addLargeHTML(parent, h) {
    var d = document.createElement("div");
    var pieces = extractRows(html);
    d.innerHTML = pieces.core;
    var tbody = $(d).find("tbody");
    $(parent).append(d);
    var cntr = 0;
    function next() {
        if (cntr < pieces.rows.length) {
            tbody.append(pieces.rows[cntr]);
            ++cntr;
            setTimeout(next, 1);
        }
    }
    next();
}

function extractRows(h) {
    var body;
    var h = h.replace(/<tbody>(.*?)<\/tbody>/, function(match, p1) {
        body = p1;
        return "<tbody></tbody>";
    });
    var rows = body.match(/<tr.*?<\/tr>/g);
    return {core: h, rows: rows};
}

您可以在这个 jsFiddle 中看到它的工作（select "Add Row by Row" 按钮）：http://jsfiddle.net/jfriend00/z7jn4p12/.

由于我无法在 Firefox 中重现您原来的问题，所以我真的不能说这是否会解决您所看到的问题。但是，它确实将 HTML 分解成更小的部分，所以如果这确实是问题所在，这应该会有所帮助。

Answer 2

The Skype Toolbar for Firefox is an extension that detects phone numbers in web pages, and re-renders them as a clickable button that can be used to dial the number using the Skype desktop application.

因此，当呈现 HTML 时，Skype 扩展程序试图在我的代码中找到垃圾，导致浏览器暂时停止工作。

感谢大家的帮助。

使用 innerHTML idea 添加大量 html 元素的最佳方法是什么？

What is the best way to add big amount of html elements using innerHTML idea?

javascript

ajax

innerhtml