DOM操作和Javascript數據結構：平面還是結構化？

Question

我有一個業務需求（這是不會改變）在頁面上顯示約10,000個項目（我不喜歡它）。這些項目通過父子關係相關，就像磁盤驅動器上的文件夾，子文件夾和文件一樣。

我想構建頁面的方式是由javascript數據結構驅動（內部應用程序，javascript將始終啓用）。

通常情況下，如果每個記錄都包含指向其父級的鏈接，那麼通常會有更好的結構化數據結構，其中每個「文件夾」包含對「子文件夾」和「文件」的引用「？

即：

var items = { //flat array 
       {id:1, parentId:0}, 
       {id:2, parentId:1}, 
       {id:3, parentId:1}, 
       {id:4, parentId:2}, 
       {id:5, parentId:2} 
      }; 

var items = { //structured 
      { id: 1, children: { 
       { id: 2, children: { 
       { id: 4 }, 
       { id: 5 }, 
       } }, 
       { id: 3 }, 
      } } 
      }; 

蝙蝠平格式似乎對眼睛更容易，但服務器會生成列表，以誠實，是不是這樣的一個大問題。性能如何比較？隨着平坦，將需要更多DOM查找，即查找元素id=1和插入DOM元素爲id=2。結構化格式具有所有定義的關係，因此javascript代碼正在導航結構，它可以創建所有需要的元素而無需其他查找。那麼，哪種方法通常會更高效？

Answer 1

結構化。它具有更高的可伸縮性，並且可以更容易地使用JQuery來操作DOM中的節點。