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

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

本文关键字：元素 最佳 方法 是什么 html innerHTML 添加 使用      更新时间：2023-09-26

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

这是交易...

ajax 请求接收一个巨大的 html，其中长度超过 75，000。

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

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

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

比我得到55，000还不够。

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

这是我尝试过的：

1.

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;

3.

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

4.

$(tab).append(html);

5.

$(tab).html(html);

唯一快速的是第二个，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};
}

你可以看到它在这个jsFiddle中工作（选择"逐行添加"按钮）：http://jsfiddle.net/jfriend00/z7jn4p12/。

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

Firefox 的 Skype 工具栏是一个扩展程序，用于检测网页中的电话号码，并将其重新呈现为可单击的按钮，可用于使用 Skype 桌面应用程序拨打号码。

因此，当呈现HTML时，Skype扩展程序会尝试在我的代码中找到狗屎，使浏览器暂时停止工作。

感谢所有的帮助。

相关文章：