谷歌前端开发指南之优化内容显示效率

[shaozj]

转载自@笑博，翻译自google大牛

    1. 删除不必要的下载（即减少http访问请求）
    2. 优化基于文本的资产的编码和传输大小
    3. 图片优化
    4. 网页字体优化
    5. HTTP 缓存

1. 删除不必要的下载（即减少http访问请求）（最快和最好的优化资源是不需要下载的资源。）

• 网页往往会包含一些不必要的资源；或者更糟的是，包含的某些资源会影响网页性能，同时还无法给访问者或所处的网站带来太大价值。
• 要实现最佳效果，应针对网页上的每个资源，定期清点和重新评估。

2. 优化基于文本的资产的编码和传输大小

• 数据压缩
  • 将浏览器必须下载的剩余资源的总大小减至最小
• 源码压缩：预处理和特定于内容的优化
• 使用 GZIP 进行文本压缩

3. 图片优化

• 删除和替换图片：要实现所需的效果，是否确实需要图片 —— 能否利用CSS效果等更高效的方式替代
• 矢量图与光栅图：
  • 矢量图（使用线、点和多边形来展示图片）：最适用于由简单的几何形状（例如徽标、文字、图标等）组成的图片，任何分辨率和缩放设置都可以提供清晰的效果，该格式最适用于需要以不同尺寸显示的高分辨率场景和资源。
  • 光栅图（通过对矩形栅格内每个像素的值进行编码来展示图片）：场景复杂（例如照片等），就应使用光栅图格式 。
• 高分辨率屏幕的含义（高分辨率屏幕需要高分辨率图片）：尽可能选择矢量图，因为矢量图与分辨率无关，始终可以实现清晰的效果，如果需要光栅图，应提供并优化每个图片的多个版本。
• 优化矢量图（SVG文件）
  • 通过运行 svgo 之类的工具缩减 SVG 文件
  • 因为 SVG 是基于 XML 的格式，所以，还可以采用 GZIP 压缩来减小传输大小 - 确保将服务器配置为压缩 SVG 资源
• 优化光栅图
  • 光栅图是一个 2 维’像素’栅格（如：100 x 100 像素的图片是 10000 个像素的序列），每个像素存储’RGBA‘值：(R) 红色通道、(G) 绿色通道、(B) 蓝色通道和 (A) alpha（透明度）通道
  • 无论将数据从服务器传输到客户端时使用哪种图片格式，在浏览器对图片进行解码时，每个像素始终占用 4 个字节的内存。对于较大的图片以及可用内存不足的设备（例如低端移动设备）来说，这可能是一个重要的约束条件。
  • 压缩图片，考虑使用webp
• 无损图片压缩与有损图片压缩：
  • 使用’有损‘过滤器处理图片，删除一些像素数据
  • 使用’无损‘过滤器处理图片，压缩像素数据
  • 因为对图片进行编码所使用的算法不同，所以，不同图片格式的质量级别无法直接进行比较：质量为 90 的 JPEG 与质量为 90 的 WebP 效果截然不同。实际上，即使相同图片格式的质量级别，根据压缩程序的使用方式不同，视觉效果可能也会不同！
• 选择正确的图片格式：
  • 普遍支持的三种格式为：GIF、PNG 和 JPEG。除了这些格式之外，某些浏览器还支持 WebP 和 JPEG XR 等较新的格式，可以提供更好的整体压缩以及更多的功能。
  • 平均来说，与可比的 JPEG 图片相比，WebP 可以使文件大小减少 30%。
  • 优化工具：
    • gifsicle 创建和优化 GIF 图片
    • jpegtran 优化 JPEG 图片
    • optipng 无损 PNG 优化
    • pngquant 有损 PNG 优化
• 提供缩放的图片资源：尽量提供尺寸合适的图片，减少因图片缩放耗费性能
  • 尽管您也许无法保证每个资源都以精确的显示尺寸提供，但是，应确保不必要的像素数最少，并确保特别是较大资产以尽可能接近显示尺寸的尺寸提供。

在优化图片时，要记住下列技巧和方法：

• 首选矢量格式：矢量图与分辨率和缩放无关，最适用于多设备或高分辨率的情况。
• 缩减和压缩 SVG 资源：大多数绘图应用程序生成的 XML 标记通常包含不必要的元数据，可以删除；确保服务器配置为对 SVG 资源采用 GZIP 压缩。
• 选择最佳光栅图格式：确定功能要求，然后选择适合每个特定资源的格式。
• 体验光栅格式的最优质量设置：随意降低’质量’设置，效果通常非常好，而字节可能会节省很多。
• 删除不必要的图片元数据：许多光栅图包含不必要的资源元数据：地理信息、相机信息等。使用适合的工具删除这些数据。
• 提供缩放的图片：调整服务器上的图片尺寸，确保’显示’尺寸尽可能接近图片的’自然’尺寸。尤其要密切关注较大的图片，因为这些图片在调整尺寸时，占用了最大的额外开销！
• 自动：投资自动化的工具和基础设施，这样，可以确保所有图片资源始终会进行优化。

4. 网页字体优化

• 网页字体解析
  • 网页字体格式
  • 通过压缩减小字体大小
• 使用 @font-face 定义字体系列
  • 格式选择
  • Unicode-range 子集内嵌
• 优化加载和呈现

5. HTTP 缓存

• 使用 ETag 验证缓存的响应
  • 服务器会生成并返回一个随机令牌，通常是文件内容的哈希值或者某个其他指纹码。客户端不必了解指纹码是如何生成的，只需要在下一个请求中将其发送给服务器：如果指纹码仍然一致，说明资源未被修改，我们就可以跳过下载。
  • 实际上，我们唯一要做的就是确保服务器提供必要的 ETag 令牌：查看服务器文档中是否有必要的配置标志。
• Cache-Control
• 废弃和更新已缓存的响应

在定义缓存策略时，要记住下列技巧和方法：

• 使用一致的网址：如果您在不同的网址上提供相同的内容，将会多次获取和存储该内容。提示：注意，网址区分大小写！
• 确保服务器提供验证令牌 (ETag)：通过验证令牌，如果服务器上的资源未被更改，就不必传输相同的字节。
• 确定中继缓存可以缓存哪些资源：对所有用户的响应完全相同的资源很适合由 CDN 或其他中继缓存进行缓存。
• 确定每个资源的最优缓存周期：不同的资源可能有不同的更新要求。审查并确定每个资源适合的 max-age。
• 确定网站的最佳缓存层级：对 HTML 文档组合使用包含内容指纹码的资源网址以及短时间或 no-cache 的生命周期，可以控制客户端获取更新的速度。
• 搅动最小化：有些资源的更新比其他资源频繁。如果资源的特定部分（例如 JavaScript 函数或一组 CSS 样式）会经常更新，应考虑将其代码作为单独的文件提供。这样，每次获取更新时，剩余内容（例如不会频繁更新的库代码）可以从缓存中获取，确保下载的内容量最少。