1. 分页加载
将数据分成若干份,每次请求当前页数据,在触底加载更多或者点击分页时加载下一页数据。
2. 虚拟列表
只渲染当前视口的数据,当用户滚动时动态更新视口里的内容,并不是一次渲染整个列表,这个方法比较适用于长列表场景。
3. 懒加载
包含大量图片或者其他资源的列表,只有当资源进入视口时才开始加载。避免一次加载过多资源。
4. 使用高效的渲染策略
在 vue 中使用 v-for 和 key 属性进行列表渲染,vue 会利用高效的 diff 算法进行 DOM 更新减少不必要的 DOM 操作
5. 优化数据处理
在 vue 中,避免在模板中进行复杂运算或数据过滤,尽可能在组件的计算属性或方法中预先处理数据。
6. 服务端渲染或静态站点生成
对于一些 SEO 要求高或首次加载速度至关重要的场景可以使用 SSR(服务端渲染)或者 SSG(静态站点生成),减少客户端渲染压力。
7. 资源优化
对图片、css、js 这些资源进行压缩合并懒加载,减少网络传输时间和资源解析成本。