javascript - 树形结构的数据，每个节点下面挂的展示成果不同，如何进行懒加载？

Question

问题描述：

类似百度百科那样的结构展示，静态Html展示没啥问题，但是有的涉及到动态展示，比如一些报表和echarts展示，节点多了页面就会很卡顿，有没有什么办法优化？

Answer 1

如果您在类似百度百科的结构展示中，遇到了节点多导致页面卡顿的问题，可以考虑以下一些优化方法：

1.分页展示

如果节点很多，可以考虑进行分页展示，每次只展示部分节点。这样可以减少节点的数量，降低页面响应时间，提高页面性能。

2.懒加载

对于一些报表和 echarts 展示，可以考虑采用懒加载的方式。即在页面的滚动事件中，等待节点进入可视区域后，再进行加载和展示。这种方式可以减少页面初始化时的请求数量和资源占用率。

3.数据优化

对于大量数据的展示，可以考虑针对数据进行优化。例如可以对数据进行聚合、压缩、分组等处理，减少数据量和复杂度，提高数据处理和展示效率。

4.渲染优化

另外，可以考虑进行渲染优化，例如采用虚拟列表技术将不在可视区域内的节点进行虚拟渲染，减少不必要的 DOM 操作，提高渲染效率。

答案引用AI生成内容，并进行了验证

Answer 2

根据你的问题描述，为了优化树形结构中每个节点下的展示性能，你可以考虑使用懒加载。懒加载允许你在需要时动态加载节点内容，从而避免一次性加载大量数据导致页面卡顿。具体实现方式如下：

为每个节点添加一个标识，表示该节点是否已加载。例如，你可以在节点数据中添加一个 isLoaded 属性，默认值为 false。

当用户展开一个节点时，检查节点的 isLoaded 属性。如果值为 false，则执行数据加载。

使用 AJAX 或其他方法异步加载节点数据。在成功加载数据后，将节点的 isLoaded 属性设置为 true，并将数据添加到对应的节点下。

使用 Vue.js、React 或其他前端框架，根据节点数据动态渲染节点内容。当节点数据更新时，框架会自动更新 DOM，从而实现节点内容的懒加载。

以下是一个简化的 Vue示例，展示如何在树形结构中实现懒加载：

<template>
  <div>
    <ul>
      <li v-for="node in treeData" :key="node.id">
        <span @click="toggleNode(node)">{{ node.name }}</span>
        <ul v-if="node.isExpanded && node.isLoaded">
          <li v-for="child in node.children" :key="child.id">{{ child.name }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        // 初始化树形结构数据，其中每个节点包含 isExpanded 和 isLoaded 标识
      ],
    };
  },
  methods: {
    toggleNode(node) {
      node.isExpanded = !node.isExpanded;
      if (!node.isLoaded) {
        // 使用 AJAX 或其他方法异步加载节点数据
        fetch(`/api/nodes/${node.id}`)
          .then((response) => response.json())
          .then((data) => {
            node.children = data.children;
            node.isLoaded = true;
          });
      }
    },
  },
};
</script>

Answer 3

目前问题已经解决，后续会贴上解决方案