Chrome 图片解码与 Image Decoding Hint

我在之前的一篇文章Chrome 图片解码与 Image.decode API，说明了为什么图片解码可能会导致非合成器动画的阻塞和如何使用 Image.decode API 来避免动画的阻塞。不过虽然 Image.decode API 给页端提供了更灵活的控制图片解码时机的能力，但是使用起来较为复杂，也容易误用，而 Image Decoding Hint 属性则更简单，容易使用，同时也满足了大部分场景下的性能需求。

Chrome 从 65 版本开始支持 Image Decoding Hint，其它浏览器 Firefox，Edge 也是支持的，Safari 年初时的状态是开发中，不清楚现在是否已经支持。

以下描述来自于 HTML 规范文档：

In order to aid the user agent in deciding whether to perform synchronous or asynchronous decode, the decoding attribute can be set on img elements. The possible values of of the decoding attribute are the following image decoding hint keywords:

sync: Indicates a preference to decode this image synchronously for atomic presentation with other content.

async: Indicates a preference to decode this image asynchronously to avoid delaying presentation of other content.

auto: Indicates no preference in decoding mode (the default).

直接翻译过来就是 —— 页端可以通过 Image.decoding 属性来控制图片解码的行为，sync 会强制同步解码，图片会和其它内容同时显示，async 则强制异步解码，可能会造成图片和其它内容不同时显示，默认值 auto 则让浏览器自己来决定。

上述描述的“和其它内容同时显示或者不同时显示”究竟是什么意思呢？这个跟浏览器合成器的光栅化策略有关，当图片元素和其它元素同时进入当前网页的可见区域，或者已经在可见区域内并且内容同时发生变化，合成器需要安排这些元素所在的图层光栅化，并且在所有发生变更的图层都光栅化完毕之后再显示完整的一帧（请参考浏览器渲染流水线解析与网页动画性能优化对非合成器动画渲染流水线的解释）。

在不支持 Image Decoding Hint 之前，Chrome 会强制图片先解码，然后再光栅化，这样保证了包括图片在内的所有同时变更的元素都是同时显示的，也就是所谓的 atomic presentation。而在支持 Image Decoding Hint 之后，Chrome 的光栅化策略就会变为：

1. 如果 Decoding Hint 是 sync，则跟之前是一样的；
2. 如果 Decoding Hint 是 async，则图片不会在光栅化之前解码，而是放到另外一个后台 Worker 线程解码，并在图片解码完成后重新光栅化图片所在区域并重绘窗口。这样造成的结果就是在图片所在区域光栅化的时候可能因为图片还未完成解码而无法绘制图片导致空白，跟其它非图片元素的显示不完全同步，也就是说如果有图片元素和非图片元素同时发生变更，非图片元素可能会提前显示；
3. 如果 Decoding Hint 是 auto，目前 Chrome 的处理是等同于 sync；

即使设置成 async，Chrome 还是会根据一些条件来决定最后的结果是 sync 还是 async，如果运行设备，网页和图片满足下面条件，最后还是会被强制为 sync：

• 如果图片还未下载完毕；

1. 或者是 gif 这样的动图；
2. 或者在 Chrome for Android 或者 Android WebView 上设备不支持 GPU 光栅化，或者网页无法开启 GPU 光栅化；
3. 或者在 Chrome for Android 或者 Android WebView 上解码后占用内存小于 512k（相当于分辨率小于 512 x 256），桌面版本为 1024k；
4. 或者解码后占用内存大于合成器的解码缓存池的上限（也就是说小图片和超大图片，都强制为同步解码，无论是什么设置）；

在 AMP 里面的 amp-img 自定义元素，AMP-runtime 在生成对应的 img 元素时，会指定 decoding 属性为 async，在现实中，大部分情况下指定为 async 应该都是合理的。

Chrome 图片解码与 Image.decode API之前演示过的一个例程，如果我们修改会导致动画阻塞的 sync.html 的代码如下：

function prepareImage() {
 var img = new Image();
 img.src = "nebula.jpg";
 img.decoding = "async";
 img.onload = function() { document.body.appendChild(img); };
}

上述代码增加了一句 img.decoding = "async";，其运行的结果跟另外一个使用 Image.decode API 的 async.html 就基本一样了，时针的动画不会被阻塞，并且在实际的应用中要比使用 Image.decode API 简单的多。（上面的代码 async 不会在 Chrome for Android 或者 Android WebView 上生效，是因为网页无法开启 GPU 光栅化）

作者：rogeryi