前端JS拉取OWID新冠统计数据加载耗时5分钟、网页不显示优化咨询

核心性能瓶颈定位 #

你遇到的等待时长久、页面加载慢的问题，和本身的循环计算逻辑几乎无关，根源是请求的数据集体积过大：
当前代码直接拉取的是包含所有国家、全时间跨度、全统计维度的疫情全量JSON数据，单文件体积接近500MB。整个流程的时间消耗90%以上集中在两个环节：

1. 浏览器从服务器下载几百MB的全量数据，网络传输耗时极长
2. 下载完成后，浏览器通过res.json()把整个大JSON字符串解析为JS对象，这一步会阻塞主线程数分钟，和文件体积直接正相关
   你写的遍历国家、累加统计值的循环逻辑，在整个流程里的耗时占比不足1%。

可落地的优化调整方案 #

• 从请求源头上压缩传输体积
  不要直接请求全量全字段的完整数据集，在请求时增加筛选规则，只让服务器返回计算需要的total_cases、new_cases、total_deaths三个字段，同时只返回每个国家最新的一条统计记录，无需拉取每个国家从疫情开始的全部历史数据。调整后整体传输体积可以从几百MB压缩到1-2MB，下载耗时从几分钟降到1秒以内。
• 简化冗余的遍历计算逻辑
  你当前的循环逻辑是遍历所有国家条目，排除数据集自带的“World”全局汇总条目，手动累加所有国家的数值。实际上数据集本身的“World”条目已经内置了准确的全球汇总值，完全可以跳过全量国家的遍历，直接读取这个条目的对应字段值，省掉所有循环计算的开销。
• 替换阻塞式的JSON解析逻辑
  不要等整个大文件全部下载、解析完成后再执行计算，换成流式JSON解析方式，边下载边逐段提取需要的字段，不用等全量文件传输完毕就可以拿到目标数值，进一步压缩等待时间。
• 补充基础加载状态提示
  数据请求发出时，先在对应DOM位置渲染临时加载提示（比如“数据加载中”），等计算完成后再替换为真实统计值，避免用户在等待过程中误以为页面卡死无响应。

内容的提问来源于stack exchange，提问作者bluezac0419