大量数据渲染怎么优化速度

1. 分页加载

将数据分成若干份，每次请求当前页数据，在触底加载更多或者点击分页时加载下一页数据。

2. 虚拟列表

只渲染当前视口的数据，当用户滚动时动态更新视口里的内容，并不是一次渲染整个列表，这个方法比较适用于长列表场景。

3. 懒加载

包含大量图片或者其他资源的列表，只有当资源进入视口时才开始加载。避免一次加载过多资源。

4. 使用高效的渲染策略

在 vue 中使用 v-for 和 key 属性进行列表渲染，vue 会利用高效的 diff 算法进行 DOM 更新减少不必要的 DOM 操作

5. 优化数据处理

在 vue 中，避免在模板中进行复杂运算或数据过滤，尽可能在组件的计算属性或方法中预先处理数据。

6. 服务端渲染或静态站点生成

对于一些 SEO 要求高或首次加载速度至关重要的场景可以使用 SSR（服务端渲染）或者 SSG（静态站点生成），减少客户端渲染压力。

7. 资源优化

对图片、css、js 这些资源进行压缩合并懒加载，减少网络传输时间和资源解析成本。