Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

文本文件 base64 + gzip 和直接 gzip 的加载成本对比

  之前做过一个二进制 base64 gzip 和直接加载的对比的实验,结论是对于二进制文件的这两种加载方式并没有太大影响。注意之前的实验中限定的条件是「二进制文件」。那如果是本来压缩比率就很高的文本文件呢? base64 + gzip 和直接 gzip 加载的成本又差多少呢?
  对文本文件做 base64 后再加载这件事我们通常是用在 svg 文件上的,把 svg 转换成 DataURL 后使用。下面是针对一个 1MB 的 svg 文件做测试:

  由于 base64 会让数据量增加 33%,所以本来 1MB 的文件 base64 后做成 DataURL 放到 html 中就有 1.4MB 那么大了。然后这个 html 文件输出到前端会经过 gzip,所以最终传输的数据大小是 517KB。而直接请求 SVG 文件是直接在原来 1MB 的基础上压缩,最终传输的数据大小是 384KB,明显比 base64 + gzip 小得多。
  而且我做测试的这张 SVG 图片算是压缩率比较低的,因为里面有大量的路径,全都是浮点数字符串。如果路径少标签多的 SVG,它的信息量就更低,压缩率就会更大。对这样的 SVG base64 后压缩率就会大大降低,甚至有可能 base64 + gzip 后的结果比未压缩的 svg 文件还大。
  最终的结论是,我们应该经历避免对文本文件的 base64。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^