困扰前端工程师的难题，如何优化十万条数据的渲染速度？

前端

2023-05-30 09:00:39

优化后端数据量过大，提升前端渲染速度

面临挑战

当后端返回大量数据时，前端渲染往往会变得缓慢，拖累页面加载速度。造成这种情况的原因可能是虚拟 DOM 构建时间过长、数据处理复杂度高，以及 content Download 时间长等。

优化方案

针对上述挑战，我们可以采用以下优化方案：

1. 虚拟列表：分块渲染

虚拟列表是一种用于处理大量数据的技术。它将数据分成多个块，仅渲染当前视窗内的数据，有效减少 DOM 构建时间和内存占用。

2. 分批加载数据：渐进加载

分批加载数据是指将数据分批次加载到页面中，而不是一次性加载所有数据。这可以降低服务器压力，减少网络延迟。

3. 服务器端渲染（SSR）：减轻前端压力

SSR 是将数据渲染成 HTML 的过程，在服务器端完成，并将最终的 HTML 页面发送给浏览器。这可以减轻前端的渲染压力，提升页面加载速度。

4. 内容分发网络（CDN）：加速数据传输

CDN 将数据缓存到离用户最近的服务器上，减少数据传输时间，提升加载速度。

5. 减少 HTTP 请求数：优化网络通信

过多的 HTTP 请求会增加浏览器开销。合并 CSS 和 JS 文件、使用雪碧图和 CDN 等方法可以减少 HTTP 请求数，优化网络通信。

6. 压缩 CSS 和 JS 文件：减小文件体积

通过压缩 CSS 和 JS 文件，可以减小文件体积，减少加载时间。可以使用 Gzip 或 Brotli 等工具进行压缩。

7. 启用浏览器缓存：利用本地存储

浏览器缓存可以将数据存储在本地，避免重复下载，提升加载速度。通过设置 Cache-Control 和 Expires HTTP 头部，可以启用浏览器缓存。

8. 优化代码：提升执行效率

优化代码可以减少代码执行时间，提升渲染速度。包括删除不必要的代码、重构代码、使用性能优化工具等。

9. 使用性能分析工具：发现性能瓶颈

性能分析工具可以帮助我们找出网站的性能瓶颈。可以使用 Chrome DevTools、Firefox Profiler 和 WebPageTest 等工具进行分析。

10. 持续监控网站性能：及时发现问题

网站性能会随时间变化，需要持续监控。可以使用 Uptime Robot、Pingdom 和 New Relic 等工具进行监控。

代码示例

// 虚拟列表：使用 React Virtualized 库
import { List } from "react-virtualized";

// 分批加载数据：使用 Axios 库
import axios from "axios";
async function loadMoreData() {
  const { data } = await axios.get("/api/data");
  // 更新数据状态
}

// 服务器端渲染：使用 Next.js 框架
export async function getServerSideProps() {
  // 从数据库获取数据
  const data = await prisma.post.findMany();
  // 返回数据到页面组件
  return { props: { data } };
}