精灵表是否在渲染过程中提供了任何优势？

Question

至少为每个动画使用一个精灵表，或者为所有精灵使用一个大的动画通常是一个好主意，因为会有更少的开销，压缩会更好，并且服务器不会受到轰炸很多要求。然而，这些好处只影响从网络服务器下载一些精灵，渲染效率怎么样？

简而言之：直接从精灵表中渲染单个帧是否有任何明显的好处，而不是事先将每个帧放在其单个画布上并从那里渲染？

我打算做的是为每个动画创建一个帧数组，因此frame[0]将是一个代表第一帧的离屏画布元素。我不是非常关心内存开销（虽然知道它也很有趣），我最关心渲染的效率。如果它是一个重要的性能影响我可以考虑改为使每个“框架”类似于一个对象，引用相应的精灵表，并x/y/w/h值，以便在工作表上找到框架。

PS：我想用画布问这个问题，webGL有什么不同吗？

Answer 1

我怀疑@Bergi说得对。

我做了以下快速性能测试，使用画布框架绘制精灵10000次，然后使用spritesheet中的剪辑。

在我的机器上（win8 / 2GHz / 4Core），从spritesheet剪切总是更快，但画布帧和spritesheet-clipping发生得如此之快以至于使用一种方法或者没有显着的渲染速度优势其他

鉴于两种方法之间没有速度提升，我们留下了Bergi的好结论，即额外的设置加上画布的内存开销会倾向于剪切精灵表。此外，画布框架解决方案肯定会落后于移动设备 - 移动设备不能很好地使用画布。

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>