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

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

事情是这样的

ajax请求接收一个巨大的html，长度超过75000

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

比我的55000还多，这还不够

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

以下是我尝试过的：

一,

二,

三,

四,

五,

唯一快速的是第二个，javascript添加nodeContent，当然这不是我想要的，因为我需要呈现HTML，而不是文本/字符串形式的HTML

我希望有人能帮助我

---

无论如何，谢谢。

下面是一段代码，它可以解析出表格HTML中的行，然后一次添加一行，以便在解析HTML时给浏览器更多的喘息时间。此解析逻辑特定于您的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};
}

函数addLargeHTML（父级，h）{
var d=document.createElement（“div”）；
var pieces=extractRows（html）；
d、 innerHTML=pieces.core；
var tbody=$（d）.find（“tbody”）；
$（父项）。追加（d）；
var-cntr=0；
函数next（）{
if（cntr<件数行数长度）{
tbody.append（片段.行[cntr]）；
++碳纳米管；
设置超时（下一步，1）；
}
}
next（）；
}
函数行（h）{
变异体；
var h=h.replace（/（.*）/，函数（匹配，p1）{
体=p1；
返回“”；
});
var rows=body.match(/
Firefox的Skype工具栏是一个扩展，用于检测网页中的电话号码，并将其重新呈现为可单击按钮，可用于使用Skype桌面应用程序拨打电话号码

因此，当HTML被呈现时，skype扩展试图在我的代码中找到垃圾，使浏览器暂时停止工作

谢谢大家的帮助。
如果浏览器在添加HTML时冻结，那么逻辑问题是HTML中的哪些内容导致其冻结？75k的HTML对于网页来说不算什么-任何浏览器都可以处理如此大小的HTML。因此，这可能取决于特定的HTML。其中的某些内容会导致Firefox出现问题。此外，when你说冻结，你是什么意思？@jfriend00，看html。当我说冻结，意味着Windows威胁浏览器停止不响应。Firefox性能工具应该让你了解你试图呈现的html有什么慢。看@JoshuaD.Boyd我刚刚做了，但我没有相关内容。有趣的是，我没有看到一个问题e在Firefox中使用此jsFiddle:。我不认为是HTML的大小导致了问题，但我还不确定它是什么。您可以解析出表格行的HTML，并分别添加每一行，以避免一次长操作。
asyncInnerHTML(html, function(fragment){
     $(tab).get(0).appendChild(fragment); // myTarget should be an element node.
});

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

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

$(tab).append(html);

$(tab).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};
}