角材料-扁平树和嵌套树之间的区别

Question

平板树：

  

在一棵扁平树中，层次结构被展平；节点不相互渲染，而是按顺序渲染为同级

嵌套树：

  

在嵌套树中，子节点位于DOM中其父节点的内部。父节点具有用于保留所有子节点的出口。

我有800个元素的命名法，我用一棵平树显示。
我首先尝试使用嵌套树，因为它似乎是最合适的树。构建它需要花一点时间，但是DOM需要5秒钟来加载树，因此我尝试了平坦的树，现在它可以完美地工作了。

问题是，如果扁平树的结果相同，那么使用嵌套树有什么意义？正确渲染了树，DOM理解了它的层次结构。

平树的DOM：

嵌套树更难构建，并且每次显示DOM时都会明显过载。嵌套树不能做什么，而扁平树不能做什么？材料文档不清楚。

Answer 1

无论是通过Anagular还是仅通过平面文件动态呈现HTML，嵌套树都有一些明显的主要优点。

• 您可以利用事件冒泡，它可以大大减少捕获用户与DOM交互所需编写的代码量。同样，当您需要捕获多个事件时，嵌套也可以使事件变得更容易。
• 通过将样式应用于将由子元素继承的父节点，您可以更好地控制格式。
• 嵌套树在使用CSS预处理器（如LESS或Sass）时具有巨大的优势。大大减少了需要编写的样式数量。
• 尽管渲染两棵树之间的性能可能相同，但是当您必须考虑连接速度较慢或移动服务质量较差的用户时，经验法则是DOM元素越少越好。

Answer 2

您还必须考虑到 flatTrees 试图在渲染之前展平您的树的事实，因此拥有 3000 个节点的树对于 flatTree 来说会很痛苦，因为它将浏览所有节点以从中构建列表。这可能非常消耗。