JavaScript：按排序順序插入DOM元素的最快方法

Question

因此，我有幾個（〜30）異步調用返回了數據（每個調用〜25個記錄），這些數據要按特定順序顯示。

當前，頁面等待所有內容加載，對單個內部數組進行排序，然后添加DOM元素（每一項數據都被應用到HTML模板/字符串中，該模板有效地被串聯並一次添加到父元素的innerHTML中）。

我喜歡要隨每個數據集插入的數據（隨着它返回）……但這意味着我需要一種不同的方式來處理排序/排序。

我考慮過的方法：

• 理想情況下，將DOM鏡像到某種B樹中，以便INSERT操作僅遍歷樹以尋找正確的元素來insertBefore / insertAfter ...因為我還沒有看到任何庫可以滿足這一需求，我最終會寫一些代碼。

• 相對於相對而言，手動迭代DOM尋找要插入的元素……似乎很乏味。

• 只需在加載每個數據集后使用jQuery.sort（fn）...似乎最好（鑒於它要運行的次數以及DOM操作的數量）有點怪，但是到目前為止，最容易實現代碼方面的問題，因為就像5行

• 我考慮了異步返回和DOM操作之間的某種緩沖隊列，但是我對JS和線程一無所知，以至於對這種方法不滿意。

我喜歡直接插入到已排序的插槽中的想法，但是我知道DOM操作可能是“緩慢的”（取決於它的完成方式，等等-我絕不是JS專家-因此在這里詢問）。 具有單獨的讀取器/ DOM處理的緩沖區隊列的想法似乎可以在響應性和DOM操作痛苦之間提供合理的折衷，但這對我來說在這點上都是理論上的……而且一切都說完了，如果結束了麻煩多於其價值，我要么保持現狀，要么就走jQ.sort DOM的懶惰路線。

您的知識淵博的建議將不勝感激:)

謝謝

Answer 1

我將使用選項2。DOM只是樹結構中的對象，因此除了您想要的樹之外，不需要單獨的抽象樹。 您可以通過屬性或expando屬性直接將數據與元素關聯（如果要這樣做，請當心命名沖突，選擇與您的項目非常相關的東西）–后者具有速度優勢，而不僅限於字符串。

搜索DOM元素列表根本不會很慢，也不是很麻煩。

在容器div中的div中插入隨機數的示例：

 var container= document.getElementById("container"); function insertOne() { // Our random number var num = Math.floor(Math.random() * 1000); // Convenient access to child elements var children = Array.prototype.slice.call(container.children); // Find the one we should insert in front of var before = children.find(function(element) { return element.__x__random > num; }); // Create the div var div = document.createElement('div'); div.innerHTML = num; div.__x__random = num; // Insert (if `before` is null, it becomes an append) container.insertBefore(div, before); } // Do it every 250ms var timer = setInterval(insertOne, 250); // Stop after 5 seconds setTimeout(function() { clearInterval(timer); }, 5000); 

 <div id="container"></div>