Page 191 - Web性能权威指南

计算图片对内存的需求

所有编码的图片经浏览器解析后都会以 RGBA 位图的形式保存于内存当中。每个
RGBA 图片的像素需要占用 4 字节：红、绿、蓝通道各占 1 字节，Alpha（透明）
通道占 1 字节。这样算下来，一张图片占用的内存量就是图片像素宽度 × 像素高
度 ×4 字节。
举个例子，800×600 像素的位图会占多大内存呢？

800 × 600 × 4 B = 1 920 000 B ≈ 1.83 MB
在资源受限的设备，比如手机上，内存占用很快就会成为瓶颈。对于游戏等严重
依赖图片的应用来说，这个问题就会更明显。

最 后， 为 什 么 执 行 速 度 还 会 受 影 响 呢？ 我 们 知 道， 浏 览 器 是 以 递 增 方 式 处 理
HTML 的，而对于 JavaScript 和 CSS 的解析及执行，则要等到整个文件下载完毕。
JavaScript 和 CSS 处理器都不允许递增式执行。

CSS 和 JavaScript 文件大小与执行性能

CSS 文件越大，浏览器在构建 CSSOM 前经历的阻塞时间就越长，从而推迟首次
绘制页面的时间。类似地，JavaScript 文件越大，对执行速度的影响同样越大；小
文件倒是能实现“递增式”执行。

打包文件到底多大合适呢？可惜的是，没有理想的大小。然而，谷歌 PageSpeed
团队的测试表明，30~50 KB（压缩后）是每个 JavaScript 文件大小的合适范围：
既大到了能够减少小文件带来的网络延迟，还能确保递增及分层式的执行。具体
的结果可能会由于应用类型和脚本数量而有所不同。

总之，连接和拼合是在 HTTP 1.x 协议限制（管道没有得到普遍支持，多请求开销
大）的现实之下可行的应用层优化。使用得当的话，这两种技术可以带来明显的性
能提升，代价则是增加应用的复杂度，以及导致缓存、更新、执行速度，甚至渲染
页面的问题。应用这两种优化时，要注意度量结果，根据实际情况考虑如下问题。

• 你的应用在下载很多小型的资源时是否会被阻塞？
• 有选择地组合一些请求对你的应用有没有好处？
• 放弃缓存粒度对用户有没有负面影响？
• 组合图片是否会占用过多内存？
• 首次渲染时是否会遭遇延迟执行？

在上述问题的答案间求得平衡是一种艺术。

176 ｜ 第 11 章