Page 219 - Web性能权威指南
P. 219
我们对两个数据集的调查表明，冗余的传输分别占据相应 HTTP 总流量
的 18% 和 20%。这些额外传输的内容占总字节数的 17%，耗电 7%，占
信号负载的 6%，在第二个数据集的所有蜂窝数据流量中，占无线资源
的 9%。而产生这些冗余传输的主要原因，可以归结为智能手机 Web 缓
存的实现未能完全支持或者严格遵照协议规范，或者开发人员没有完全
利用相应的库所提供的缓存功能。
——Web Caching on Smartphones，MobiSys 2012
你的应用在一遍又一遍地请求不必要的资源吗？有证据表明，提出这个问题一点也
不可笑。请大家务必对自己的应用多加注意，当然最好是通过测试手段来保证。
13.1.2 压缩传输的数据
利用本地缓存可以让客户端避免每次请求都重复取得数据。不过，还是有一些资源
是必须取得的，比如原来的资源过期了，或者有新资源，再或者资源不能缓存。对
于这些资源，应该保证传输的字节数最少。因此要保证对它们进行最有效的压缩。
HTML、CSS 和 JavaScript 等文本资源的大小经过 gzip 压缩平均可以减少 60%~80%。
而图片则需要仔细考量：
• 图片一般会占到一个网页需要传输的总字节数的一半；
• 通过去掉不必要的元数据可以把图片文件变小；
• 要调整大小就在服务器上调整，避免传输不必要的字节；
• 应该根据图像选择最优的图片格式；
• 尽可能使用有损压缩。
不同图片格式的压缩率迥然不同，因为不同的格式是分别为不同使用场景设计的。
事实上，如果选错了图片格式（比如，使用了 PNG 而非 JPG 或 WebP），多产生几
百甚至上千 KB 数据是轻而易举的事。建议大家多找一些工具和自动化手段，以确
定最佳图片格式。
选定图片格式后，其次就是不要让图片超过它需要的大小。如果在客户端对超出需
要大小的图片做调整，那么除了额外传输不必要的字节之外，还会浪费 CPU、GPU
和内存资源（参见 11.6 节的“计算图片对内存的需求”）。
最后，选择了正确的格式，确定了必需的大小，接下来就要研究使用哪一种有损图
片格式，比如 JPEG 还是 WebP，以及压缩到哪个级别：较高压缩率可以明显减少字
节数，同时图片品质不会有太大或太明显的损失，尤其是在较小（手机）的屏幕上
看，不容易发现。
优化应用的交付 ｜ 205
