在 IE/Edge 中，jQuery html 元素创建速度非常慢？ 有什么我可以做的吗？

Question

Update: jsfiddle/v4

Silly typo in the demo had both executions running at 1000 rather than 10,000.

At 10,000 Edge stalls out, which is what I'm seeing a lot of in my website. At 1,000, it just takes a few seconds.

Still, after more than five solid minutes of waiting on Edge, I closed the process where chrome did it in less than 5 seconds.

A sample run across the browsers mentioned has these results. The first number is the test that renders to the screen, the second number populates a jQuery-created element.

Browser:    To Screen   To jQuery-created element, not injected into DOM.
IE/Edge:    Stalled out.
Chrome:     4519        3757
Firefox:    4032        4092
Opera:      16925       16450

I experienced some crashes in these tests, because I don't think any browser likes tags nested 10,000 deep, but that's not at all what I'm actually doing anyway. I experienced no crashes with the test that writes to a jquery-created element, other than MS's browsers.

---

I'm having a problem where IE 11 & Edge both take an extremely long time when creating a large number of elements. Chrome/Firefox/Opera all execute the script unbelievably fast. Even my LG Optimus's Chrome browser doesn't struggle. But Edge/IE can take several minutes.

For whatever it's worth, I'm on windows 10.

I've created a very contrived example that nests the same element within itself 10,000 times and counts the length immediately after it's done.

It isn't that it's taking the browser time to display the elements, as shown with the second button that takes an equal amount of time even though the elements aren't injected into the DOM.

jsfiddle/v3

Is there anything I can do aside from the classic javascript route of "<span>" + variable + "</span>" ? It's just much cleaner to be able to to use the jQuery method.

I have googled for this, but I haven't hit on the right combination of words if there are other posts on the topic.

(jsfiddle/v4 code)

$(document).ready(function () {
   $("#clk").click(function () {
       StartTime = new Date().getTime();
       var htm = $("<span>")
       for (var i=0; i<10000; i++) {
           htm = $("<span>").append(htm);
       }
       $("#recip").html(htm);
       EndTime = new Date().getTime();
       TotalTime = EndTime - StartTime;
       alert(TotalTime + "ms")
   });
   
   var $recip = $("<div>");
   $("#clk2").click(function () {
       StartTime = new Date().getTime();
       var htm = $("<span>")
       for (var i=0; i<10000; i++) {
           htm = $("<span>").append(htm);
       }
       $recip.html(htm);
       EndTime = new Date().getTime();
       TotalTime = EndTime - StartTime;
       alert(TotalTime + "ms")
   });
});

Answer 1

正如这里所解释的，一个选项（如果它适合您的需要）是将整个 html 创建为文本，然后在最后将其作为一个整体附加。