用JSONC优化表单提交：3步让POST请求体积大幅下降

用JSONC优化表单提交：3步让POST请求体积大幅下降

【免费下载链接】JSONCJSON compressor and decompressor项目地址: https://gitcode.com/gh_mirrors/json/JSONC

在前后端交互中，POST请求体积过大是拖慢页面响应、增加服务器带宽消耗的常见痛点。JSONC 是一个开源的 JSON compressor and decompressor（JSON 压缩与解压库），专门用于压缩浏览器向服务器提交的 JSON 数据，只需 3 步就能让表单提交体积下降一半以上，是前端性能优化中性价比极高的"轻量级武器"。

为什么你的表单 POST 请求体积越来越大？

随着富交互应用（RIA）的普及，一个看似普通的表单往往携带大量 JSON 数据：多级联动选择、批量编辑表格、动态添加的列表项……这些数据在前端用JSON.stringify序列化后直接塞进 POST 请求体，字段名重复出现、空格与引号冗余，体积迅速膨胀。

更隐蔽的是：服务器返回的数据可以走 GZIP 压缩，但浏览器上行的数据（即 POST 请求体）通常无法直接利用 GZIP 传输。实测中，JSON 字符串经过 URL 编码后体积还会额外增加 28%~36%，让本就臃肿的请求雪上加霜。JSONC 正是为了解决这个"上行压缩空白"而诞生的。

JSONC 是什么？一个为"上行数据"而生的 JSON 压缩库

JSONC 提供两种互补的压缩思路，核心 API 都定义在 src/JSONC.js 中，浏览器、Node.js、AMD 模块环境均可使用：

JSONC.compress适合键名重复度高的大对象；JSONC.pack则适合几乎任何场景，还能与其他压缩库配合使用，做到"压了再压"。

第1步：获取并引入 JSONC 压缩库

最简单的方式是直接引入压缩好的成品文件 versions/jsonc.min.js，在 HTML 页面中加入一行即可：

<script src="jsonc.min.js"></script>

如果你是开发者，也可以通过git clone https://gitcode.com/gh_mirrors/json/JSONC获取完整源码，浏览器端使用 src/JSONC.js 原版，服务端解压脚本则在 php/GzipJSON.php 中。

第2步：用 JSONC.pack 压缩表单数据再提交

这是整个优化中最核心的一步。提交表单前，把原来的JSON.stringify替换成 JSONC 的打包方法：

// 优化前：直接提交原始 JSON 字符串 var data = JSON.stringify(formData); // 优化后：GZIP + Base64 压缩后提交 var data = JSONC.pack(formData);

如果数据键名重复度高，还可以先压缩键名再打包：JSONC.pack(formData, true)，压缩效果更佳。项目自带的演示源码 Benchmark/obj2/demo_pack_gzip_with_base64/js/app.js 展示了完整的提交链路，可以直接参考。

第3步：服务端解压还原原始 JSON

前端压完，服务端要能"看懂"。项目提供了 PHP 版本的解压类 php/GzipJSON.php，只需简单调用：

$json = (new GzipJSON())->decompress( $_POST['json'] );

解压后就能得到和压缩前完全一致的数据对象。解压方法同样遵循对称原则：用JSONC.pack打包的用JSONC.unpack还原，加了true参数的记得在unpack时也加上true，保证数据原样恢复。

实测数据：POST 请求体积最高下降 67%

JSONC 自带的 Benchmark 基准测试给出了非常直观的对比结果，以下是两个典型测试对象在不同方案下的表现：

• 对 17331 字节的对象，采用pack gzip with base64方案，发送体积从 27260 字节降到 11569 字节，改进率达57.56%；
• 对 19031 字节的对象，同样的方案把发送体积从 26580 字节压缩到 8743 字节，改进率高达67.11%。

两个对象都验证了同一结论：打包压缩后的 POST 请求体积不足原来的一半，在弱网、移动端场景下的提速效果尤为明显。完整的测试项目位于 Benchmark/obj2/，多种方案（带/不带 Base64、带/不带预压缩）均可一键对比。

使用 JSONC 的注意事项（新手必看）

1. 小数据慎用compress：键名映射压缩对数据量大的对象效果惊艳，但对象太小时，映射表本身的开销可能让体积不减反增；
2. 留意 Base64 的取舍：Base64 会让体积增加约 33%，但换来的是内容可安全地放入 URL 编码传输，pack gzip with base64在基准测试中仍是综合最优方案；
3. 前后端方法必须对称：压缩与解压的参数（如是否预压缩键名）要一一对应，否则服务端无法正确还原。

小结

优化表单提交性能，很多时候不必大动干戈。引入 JSONC 这个轻量级的 JSON 压缩与解压库，1 次替换 + 1 个服务端解压调用，POST 请求体积即可下降 57%~67%。对于表单数据多、提交频繁、用户网络环境复杂的应用，这 3 步堪称性价比最高的前端性能优化方案之一。详细用法与更多示例可参考项目文档 README.md。

【免费下载链接】JSONCJSON compressor and decompressor项目地址: https://gitcode.com/gh_mirrors/json/JSONC