javascript - 使用 context.drawImage() 时出现奇怪的 700 毫秒延迟；

Question

我正在制作一个小型 Canvas 动画，它需要我逐步浏览一个大型 Sprite 表 png，因此我从 drawImage() 中获得了很多里程。我过去使用它从来没有遇到过麻烦，但今天我在触发drawImage后遇到了奇怪的阻塞延迟。

我的理解是drawImage是同步的，但是当我运行此代码时drawImage已触发!在图像实际出现之前大约700毫秒。值得注意的是，Chrome 中为 700 毫秒，Firefox 中为 1100 毫秒。

window.addEventListener('load', e => {
    console.log("page loaded");

    let canvas = document.getElementById('pcb');
    let context = canvas.getContext("2d");

    let img = new Image();

    img.onload = function() {
        context.drawImage(
            img,
            800, 0,
            800, 800,
            0, 0,
            800, 800
        );

        console.log("drawImage fired!");
    };

    img.src = "/i/sprite-comp.png";
});

在更大的上下文中，此代码在 requestAnimationFrame 循环中运行，我仅在第一次执行 drawImage 期间遇到此延迟。

我认为这与我的 Sprite 表 (28000 × 3200) @ 600kb 的大尺寸有关，尽管 onload 事件似乎正确触发。

编辑:这是 rAF 帧之间的时间(毫秒)的打印输出。除非我删除drawImage函数，否则我会一直得到这个结果。

Answer 1

那是因为加载事件只是一个网络事件。它仅告诉浏览器已获取媒体、解析元数据，并识别出它是可以解码的有效媒体文件。
但是，当此事件触发时，渲染部分可能尚未完成，这就是为什么您的第一次渲染需要花费如此多的时间。 _{(虽然它曾经是FF独有的行为..)}

因为 drawImage() 是同步的，因此它也会使解码+渲染成为同步操作。确实如此，您甚至可以使用 drawImage 作为告诉 when an image really is ready. 的方法。 .

请注意，现在有一个 decode() HTMLImageElement 接口(interface)上的方法将以非阻塞方式准确地告诉我们这一点，因此最好在可用时使用它，并且无论如何在运行广泛的图形应用程序之前在屏幕外执行所有功能的预热。

<小时/>

但是由于您的源图像是 Sprite 表，因此您实际上可能对 createImageBitmap() 更感兴趣方法，这将生成 ImageBitmap从源图像中，可以选择剪切。这些 ImageBitmap 已被解码，可以立即绘制到 Canvas 上。这应该是您的首选方式，因为它还可以避免您每次都绘制整个 Sprite 表。对于不支持此方法的浏览器，您可以通过返回一个 HTMLCanvasElement 及其上绘制的图像部分来对其进行猴子修补:

if (typeof window.createImageBitmap !== "function") {
  window.createImageBitmap = monkeyPatch;
}

var img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://upload.wikimedia.org/wikipedia/commons/b/be/SpriteSheet.png";
img.onload = function() {
  makeSprites()
    .then(draw);
};


function makeSprites() {
  var coords = [],
    x, y;
  for (y = 0; y < 3; y++) {
    for (x = 0; x < 4; x++) {
      coords.push([x * 132, y * 97, 132, 97]);
    }
  }
  return Promise.all(coords.map(function(opts) {
      return createImageBitmap.apply(window, [img].concat(opts));
    })
  );
}

function draw(sprites) {
  var delay = 96;
  var current = 0,
    lastTime = performance.now(),
    ctx = document.getElementById('canvas').getContext('2d');
  anim();

  function anim(t) {
    requestAnimationFrame(anim);
    if (t - lastTime < delay) return;
    lastTime = t;
    current = (current + 1) % sprites.length;
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
    ctx.drawImage(sprites[current], 0, 0);
  }

}

function monkeyPatch(source, sx, sy, sw, sh) {
  return Promise.resolve()
    .then(drawImage);

  function drawImage() {
    var canvas = document.createElement('canvas');
    canvas.width = sw || source.naturalWidth || source.videoWidth || source.width;
    canvas.height = sh || source.naturalHeight || source.videoHeight || source.height;
    canvas.getContext('2d').drawImage(source,
      sx || 0, sy || 0, canvas.width, canvas.height,
      0, 0, canvas.width, canvas.height
    );
    return canvas;
  }
}

<canvas id="canvas" width="132" height="97"></canvas>