前端性能优化：异步请求、Loading状态与大数据渲染实战

1. 问题背景与现象分析

前端开发中经常会遇到这样的场景：页面需要同时处理异步数据请求、全局loading状态管理和大数据量渲染。当这三个因素叠加时，很容易出现主线程卡顿的问题，导致页面响应迟缓甚至假死。

我最近在开发一个数据可视化平台时就遇到了这个典型问题。页面需要：

1. 同时发起多个图表的数据请求（平均每个请求约200ms）
2. 在请求期间显示全局loading状态
3. 接收到的数据量较大（单个图表数据约5000条）
4. 需要实时渲染这些数据到Canvas图表中

在低端设备上测试时，页面出现了明显的卡顿现象，FPS从60骤降到10以下，用户体验非常糟糕。通过Chrome Performance工具分析发现，主要瓶颈出现在：

• 多个请求回调集中触发
• loading状态频繁更新导致的DOM重排
• 大数据量的图表渲染计算

2. 核心问题拆解

2.1 异步请求的并发控制问题

默认情况下，浏览器会并行发起6个左右的HTTP请求（HTTP/1.1）。当页面需要同时加载多个数据源时，这些请求的回调会在短时间内集中触发，导致主线程被密集占用。

javascript复制// 典型的问题代码示例
const fetchAllData = async () => {
  const data1 = await fetch('/api/data1')
  const data2 = await fetch('/api/data2')
  // ...更多请求
  renderChart(data1, data2)
}

2.2 全局loading状态管理问题

常见的loading状态实现方式是通过一个全局变量控制，任何请求开始和结束时都会触发状态更新：

javascript复制let isLoading = false

const fetchWithLoading = async (url) => {
  isLoading = true
  const data = await fetch(url)
  isLoading = false
  return data
}

这种实现会导致：

1. 频繁的React/Vue组件重渲染
2. 多个请求间loading状态互相覆盖
3. 不必要的中间状态