javascript - Sprite 表在渲染过程中有什么优势吗？

Question

至少为每个单独的动画使用一个 Sprite 表，甚至为所有 Sprite 使用一个大的 Sprite 表通常是一个好主意，因为开销会更少，压缩会更好，并且服务器不会被许多要求。然而这些好处都只影响从网络服务器下载一个 Sprite ，渲染效率呢？

简而言之:直接从 sprite 表渲染单个帧，而不是预先将每个帧放在其单独的 Canvas 上并从那里渲染，有什么显着的好处吗？

我打算做的是为每个动画创建一个帧数组，因此 frame[0] 将是一个表示第一帧的屏幕外 Canvas 元素。我不是特别关心内存开销(尽管知道它也很有趣)，我主要关心渲染的效率。如果这是一个重大的性能损失，我可以考虑让每个“帧”都像一个对象，引用各自的 Sprite 表，以及在哪里找到帧的 x/y/w/h 值在工作表上。

PS:我问的是 Canvas ，对于 webGL 会有所不同吗？

Answer 1

我怀疑@Bergi 说得恰到好处。

我进行了以下快速性能测试，使用 Canvas 帧绘制 Sprite 10000 次，然后使用 Sprite 表中的剪辑。

在我的机器上 (win8/2GHz/4Core)，从 spritesheet 裁剪总是更快，但是 canvas-frames 和 spritesheet-clipping 都发生得如此之快以至于使用一种方法或其他。

鉴于这两种方法之间的速度没有提高，我们只剩下 Bergi 的好结论，即额外的设置加上 Canvas 的内存开销会使决定倾向于裁剪 spritesheet。此外， Canvas 框架解决方案在移动设备上肯定会滞后——移动设备无法很好地处理 Canvas 。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


var cframes=[];
var iw,ih,iw10;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/avatars.png";
function start(){

  var iw=img.width;
  var ih=img.height;
  var iw10=parseInt(iw/10);
  var iterations=10000;

  for(var i=0;i<10;i++){
    var c=document.createElement('canvas');
    var cx=c.getContext('2d');
    c.width=iw10;
    c.height=ih;
    cx.drawImage(img,  iw10*i,0,iw10,ih,  0,0,iw10,ih);
    cframes.push(c);
  }


  var t1=performance.now();
  for(var i=0;i<iterations;i++){
    ctx.drawImage(cframes[i%10],10,0);
  }
  var t2=performance.now();


  var t3=performance.now();
  for(var i=0;i<iterations;i++){
    ctx.drawImage(img,  (i%10)*iw10,0,iw10,ih,  10,ih,iw10,ih);
  }
  var t4=performance.now();

  alert(iterations+' draws. Canvas-frames:'+parseInt(t2-t1)+'ms, spritesheet-clips:'+parseInt(t4-t3)+'ms');

}

body{ background-color: black; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>