如何通过JS实现JSON文件分页加载，仅获取对应页的URL数据

方案一：提前拆分JSON为分页小文件 #

这是最省心的做法——把你的大JSON文件拆成多个按页码命名的小文件，比如page_1.json存第1-1000条URL，page_2.json存1001-2000条，以此类推。用简单的脚本就能完成拆分，比如Python脚本：

import json

# 读取原始大JSON文件（假设内容是URL数组）
with open('all_urls.json', 'r', encoding='utf-8') as f:
    url_list = json.load(f)

page_size = 1000
total_pages = (len(url_list) + page_size - 1) // page_size  # 计算总页数

# 循环拆分并保存
for page_num in range(1, total_pages + 1):
    start = (page_num - 1) * page_size
    end = start + page_size
    current_page_urls = url_list[start:end]
    with open(f'page_{page_num}.json', 'w', encoding='utf-8') as f:
        json.dump(current_page_urls, f)

拆分完成后，前端分页时直接根据当前页码请求对应的小JSON文件就行，完全不用加载整个大文件，性能拉满。

方案二：后端动态读取JSON片段（保留原始大文件） #

如果不想拆分原始文件，可以在后端写个接口配合索引文件实现按需读取：

1. 先生成索引文件：运行脚本遍历大JSON，记录每条URL在文件中的起始/结束位置，保存成url_index.json。这样后续不用每次全读大文件，直接通过索引定位位置：

import json

index = []
current_pos = 0

with open('all_urls.json', 'r', encoding='utf-8') as f:
    # 跳过JSON数组开头的'['
    f.read(1)
    current_pos += 1
    while True:
        # 跳过空行和分隔逗号
        line = f.readline()
        if not line:
            break
        line = line.strip()
        if not line or line == ',':
            current_pos += len(line) + 1
            continue
        
        # 记录当前条目的起始位置，然后读到条目结束
        start_pos = current_pos
        # 逐字符读取直到遇到逗号或数组结尾']'
        while True:
            char = f.read(1)
            current_pos += 1
            if char in (',', ']'):
                end_pos = current_pos - 1
                index.append((start_pos, end_pos))
                break

# 保存索引文件
with open('url_index.json', 'w', encoding='utf-8') as f:
    json.dump(index, f)

2. 后端接口逻辑：当收到页码请求时，计算对应条目范围（比如第3页就是2001-3000条），从url_index.json里取出这些条目的位置，然后直接打开大JSON文件，读取对应位置的内容，拼接成合法的JSON数组返回给前端。

这种方案不用改动原始大文件，但需要后端支持，索引文件只需要生成一次。

方案三：前端流式解析（纯前端应急方案） #

纯前端可以用fetch的流式API尝试解析，但对50万条数据来说，复杂度和性能都不如前两种方案，只适合临时应急。大致思路是：

• 用fetch获取大JSON文件，拿到可读流
• 逐段读取内容，手动计数条目，收集够当前页的1000条后就停止读取
• 但要处理JSON的语法细节（比如逗号、括号），很容易出错，而且前端内存压力还是不小，不推荐作为长期方案。

总结：优先选方案一拆分小文件，操作简单，前后端都好实现；如果必须保留原始大文件，就用方案二后端+索引的方式。

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