JSON.parse()和JSON.stringify()本身很快，但高频或大数据量时因内存分配、GC压力及主线程阻塞会导致明显卡顿；10KB以下无感，1–5MB阻塞20–100ms，超10MB易触发长任务。
JSON.parse() 和 JSON.stringify() 在 HTML5 中真会影响页面速度？
影响很小，但高频或大数据量时会明显卡顿。浏览器原生实现的 JSON.parse() 和 JSON.stringify() 本身很快，瓶颈往往不在解析逻辑，而在内存分配、字符串拷贝、GC 压力，以及你是否在主线程里一次性处理几 MB 的 JSON。
- 10 KB 以下 JSON：几乎感知不到延迟
- 1–5 MB JSON：
JSON.parse()可能阻塞主线程 20–100ms，滚动/动画会掉帧 - 超过 10 MB：极易触发长任务（Long Task），Chrome 控制台会标红警告
HTML5 场景下哪些操作最容易拖慢 JSON 处理？
不是 JSON 本身慢，而是常见误用放大了开销。尤其在单页应用、本地存储读写、Web Worker 通信等 HTML5 典型场景中：
- 在
DOMContentLoaded或scroll回调里同步解析大 JSON 字符串 - 反复调用
localStorage.getItem('data')+JSON.parse()而不缓存结果 - 把未压缩的原始 JSON 直接塞进
postMessage()传给 Web Worker（序列化成本高） - 用
JSON.stringify(obj)序列化含循环引用、大量函数或 DOM 节点的对象（直接报错或静默截断）
真正有效的 HTML5 JSON 优化手段
绕过“怎么快”，先解决“为什么慢”。以下方法经实测在 Chrome/Firefox/Safari 均有效：
- 大数据量 JSON 解析移出主线程：用
Web Worker+transferable（如ArrayBuffer配合自定义二进制格式），或至少用setTimeout(..., 0)分片解析 - 本地存储前先压缩：对纯数据 JSON，用
lz-string压缩后再存localStorage，体积常减少 60%+，读取时再解压 - 避免无谓序列化：如果只是临时传参，用
structuredClone()（支持 Map/Set/Date 等）比JSON.stringify() → JSON.parse()更快更安全 - 预检数据结构：用
typeof data === 'string'和data.trim().startsWith('{')快速过滤非法输入，防止JSON.parse()抛异常打断流程
const worker = new Worker('json-parser.js');
worker.postMessage({ jsonText: bigJsonString }, [/* transferables if available */]);
worker.onmessage = ({ data }) => console.log('parsed:', data);
容易被忽略的兼容性与陷阱
JSON.parse() 不是万能胶。HTML5 环境下几个硬伤必须手动兜底：
立即学习“前端免费学习笔记（深入）”；
-
JSON.parse('null')返回null，但JSON.parse('undefined')直接报SyntaxError—— 后端返回非标准值时前端得先.replace(/undefined/g, 'null') -
localStorage存储上限约 5–10 MB（各浏览器不同），但实际能存的 JSON 字符串可能远小于此，因为 Unicode 字符（如 emoji）在 UTF-16 下占 2 个字节，length统计不准 -
fetch()响应体用response.json()比手动response.text().then(JSON.parse)略快，且自动处理Content-Type校验，别自己造轮子
真正卡住你的，往往不是 JSON 格式本身，而是没意识到“解析”和“使用”之间那几百毫秒里，浏览器正在重排、重绘、回收内存——而这些全被你塞进同一个调用栈里了。
