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 查找元素并为id=2 插入DOM 元素。结构化格式定义了所有关系，因此javascript 代码正在导航结构，它可以创建所有需要的DOM 元素，而无需额外查找。那么哪种方法通常会更高效？

Answer 1

结构化。它更具可扩展性，并且更容易使用 JQuery 操作 DOM 中的节点。