1884486 - Warn when Images without decoding=sync get sync-decoded

Status: NEW

(Core :: Layout: Images, Video, and HTML Frames, enhancement)

Description

[Kelsey Gilbert [:jgilbert]]

We should try to push websites away from relying on behaviors where there's now an official way to do it.

If a website wants sync-decoding for an image, they should use decoding=sync.
We should be able to detect if the website knows that it should be able to avoid jank of a sync-decode for decoding!=sync.

Pseudocode:

function onSyncDecode(img, reason) {
  if (img.decoding == 'sync') return;
  if (isResolved(img.decode())) return;
  // Not guaranteed-decoded:
  console.warn(img, `Sync decoding was incurred (reason: ${reason}, which contributes to jank.`
                         `(.decoding=${img.decoding}, .decode() => not yet Resolved)`);
}

Website:

const img = new HTMLImageElement();
img.src = '...';
document.body.appendChild(img);
// Force decode so that we paint immediately.
c2d.drawImage(src); // Oops, warns: "Sync decoding was incurred (reason: CanvasRenderingContext2D.drawImage), which contributes to jank.

Comment 1

[Kelsey Gilbert [:jgilbert]]

@tnikkel Is this possible?