Web应用优化 - 压缩内容传输量

1. 选取合适的数据协议

典型场景:打开 Google Docs 表格拉取后台数据,http 响应内容的序列化采用 Protobuf 协议 。

数据序列化:JavaScript 对象转为字节,将字节恢复为 JavaScript 对象,然后在网络间传输。

常见的协议有 JSON/XML/Protobuf 等。对于一个庞大的 docs 表格,使用 JSON 或者 xml 格式进行数据传输,太过于冗余。

{
    "workbookConfig":[
        [
            {
                "1":"0",
                "2":"0",
                "3":0,
                "4":200
            }
        ]
    ]
}

例如 pb 协议描述的数据结构代表一个表格的全局配置信息。

2. 合理使用压缩算法

典型场景:Google Docs 文档上行操作消息压缩

在 Google Docs 文档中,对于http请求中的局部参数进行 gzip 压缩,例如使用 pako 模块, 减少网络传输体积。

例如 docs 文档插入一个表格的变更集, 压缩前后对比:原始大小:35293 字节,压缩结果大小:1148 字节,压缩比为 3074%

Web应用优化 - 压缩内容传输量

示例代码: https://jsfiddle.net/zhangchi/xu5380mn/27/

解压工具: http://www.txtwizard.net/compression

上一篇:Docker部署到Windows


下一篇:Web 应用优化 - 按需加载资源