Question

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

这是交易......

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

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

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

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

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。

我希望有人可以帮助我。

无论如何，谢谢。

Answer 1

这是一段代码，用于解析表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中工作（选择＆＃34;按行添加行＆＃34;按钮）：http://jsfiddle.net/jfriend00/z7jn4p12/。

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

Answer 2

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

因此，当呈现HTML时，skype扩展程序尝试在我的代码中查找shit，使浏览器停止工作片刻。

感谢您的帮助。

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

2 个答案: