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

Question

更新： jsfiddle/v4

演示中愚蠢的錯別字讓兩次執行都以 1000 而不是 10,000 運行。

在 10,000 Edge 停頓時，這是我在我的網站上看到的很多。 在 1,000 時，只需幾秒鍾。

盡管如此，在 Edge 上等待了超過 5 分鍾后，我關閉了 chrome 在不到 5 秒內完成的過程。

在提到的瀏覽器上運行的示例具有這些結果。 第一個數字是呈現到屏幕的測試，第二個數字填充 jQuery 創建的元素。

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

我在這些測試中遇到了一些崩潰，因為我認為沒有任何瀏覽器喜歡嵌套 10,000 層深的標簽，但這根本不是我實際在做的事情。 除了 MS 的瀏覽器之外，我沒有遇到寫入 jquery 創建的元素的測試崩潰。

---

我遇到了一個問題，即 IE 11 和 Edge 在創建大量元素時都需要很長時間。 Chrome/Firefox/Opera 都以令人難以置信的速度執行腳本。 甚至我的 LG Optimus 的 Chrome 瀏覽器也沒有問題。 但 Edge/IE 可能需要幾分鍾時間。

不管它值多少錢，我都在 Windows 10 上。

我創建了一個非常人為的示例，該示例將同一元素嵌套 10,000 次，並在完成后立即計算長度。

並不是說瀏覽器需要花費時間來顯示元素，如第二個按鈕所示，即使元素沒有注入到 DOM 中也需要相同的時間。

jsfiddle/v3

除了"<span>" + variable + "</span>"的經典 javascript 路線之外，我還能做些什么嗎？ 能夠使用 jQuery 方法要干凈得多。

我已經用谷歌搜索過這個，但如果有關於該主題的其他帖子，我還沒有找到正確的單詞組合。

（jsfiddle/v4 代碼）

$(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 創建為文本，然后在最后將其作為一個整體附加。