DOM操作和Javascript数据结构：平面还是结构化？

我有一个业务需求（不会改变），在一个页面上显示大约10000个项目（我不喜欢）。这些项目通过父子关系进行关联，就像磁盘驱动器上的文件夹、子文件夹和文件一样

我希望以这样一种方式构建页面：它由

javascript

数据结构驱动（内部应用程序，

javascript

将始终处于启用状态）

一般来说，最好是使用一个平面数据结构，其中每个记录都包含指向其父记录的链接，还是使用一个结构化数据结构，其中每个“文件夹”都包含对“子文件夹”和“文件”的引用

即：

---

乍一看，平面格式似乎更容易，但服务器将生成该列表，这并不是什么大问题。性能如何比较？使用flat时，需要进行更多的

DOM

查找，即查找id=1的元素

DOM

并插入id=2的

DOM

元素。结构化格式定义了所有关系，因此当

javascript

代码在结构中导航时，它可以创建所需的所有

DOM

元素，而无需额外查找。那么，哪种方法通常更有效

结构化。它的可伸缩性更强，使用JQuery可以更容易地操作DOM中的节点。

感谢您的输入。你能详细介绍一下它的可扩展性吗？有真实世界的例子或合成测试吗？

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 },
             } }
            };