问题描述
我一直在开发一款游戏，该游戏需要渲染数千个非常小的图像（20 ^ 20 px），并每帧旋转一次。提供了一个示例代码段。
我已经使用了我所知道的每一个技巧来加速它以提高帧速率，但是我怀疑我还有其他方法可以优化它。
当前的优化包括：
- 用显式转换替换保存/恢复
- 避免比例/大小转换
- 明确说明目标大小，而不是让浏览器猜测
- requestAnimationFrame而不是set-interval
已尝试但未出现在示例中：
//initial canvas and context
var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext('2d');
//create an image (I) to render
let myImage = new OffscreenCanvas(10,10);
let myImageCtx = myImage.getContext('2d');
myImageCtx.fillRect(0,2.5,10,5);
myImageCtx.fillRect(0,10);
myImageCtx.fillRect(7.5,10);
//animation
let animation = requestAnimationFrame(frame);
//fill an initial array of [n] object positions and angles
let myObjects = [];
for (let i = 0; i <1500; i++){
myObjects.push({
x : Math.floor(Math.random() * 800),y : Math.floor(Math.random() * 800),angle : Math.floor(Math.random() * 360),});
}
//render a specific frame
function frame(){
ctx.clearRect(0,canvas.width,canvas.height);
//draw each object and update its position
for (let i = 0,l = myObjects.length; i<l;i++){
drawImagenoreset(ctx,myImage,myObjects[i].x,myObjects[i].y,myObjects[i].angle);
myObjects[i].x += 1; if (myObjects[i].x > 800) {myObjects[i].x = 0}
myObjects[i].y += .5; if (myObjects[i].y > 800) {myObjects[i].y = 0}
myObjects[i].angle += .01; if (myObjects[i].angle > 360) {myObjects[i].angle = 0}
}
//reset the transform and call next frame
ctx.setTransform(1,1,0);
requestAnimationFrame(frame);
}
//fastest transform draw method - no transform reset
function drawImagenoreset(myCtx,image,x,y,rotation) {
myCtx.setTransform(1,y);
myCtx.rotate(rotation);
myCtx.drawImage(image,image.width,image.height,-image.width / 2,-image.height / 2,image.height);
}<canvas name = "canvas" id = "canvas"></canvas>解决方法
使用2D API和单个线程，您已经非常接近最大吞吐量，但是有些小问题可以提高性能。
WebGL2
但是首先，如果您使用javascript追求最佳性能，则必须使用WebGL
与2D API相比，使用WebGL2可以绘制8倍或更多的2D精灵，并且具有更大的FX范围（例如，颜色，阴影，凹凸，单次调用智能平铺贴图...）
WebGL非常值得
性能相关要点
-
globalAlpha会在每次drawImage调用中应用，除1之外的其他值不会影响性能。 -
避免调用
rotate这两个数学调用（包括刻度）要比rotate快一点。例如ax = Math..cos(rot) * scale; ay = Math.sin(rot) * scale; ctx.setTransform(ax,ay,-ay,ax,x,y) -
而不是使用许多图像，而是将所有图像放置在一个图像（子画面）中。在这种情况下不适用
-
不要乱扔全局范围。使对象尽可能靠近函数范围，并按引用传递对象。访问全局范围的变量要比本地范围的变量慢得多。
最好使用的模块，因为它们具有自己的本地作用域
-
使用弧度。将角度转换为度和向度都将浪费处理时间。学习使用弧度
Math.PI * 2 === 360Math.PI === 180，依此类推 -
对于正整数，请不要使用
Math.floor，因为它们会自动将Doubles转换为Int32，因此请使用按位运算符，例如Math.floor(Math.random() * 800)的速度比Math.random() * 800 | 0（{{1} }是OR）请注意所使用的数字类型。如果每次使用整数都将其转换回两倍，则转换为整数将需要花费周期。
-
始终尽可能进行预计算。例如，每次渲染图像时，将否定并划分宽度和高度。这些值可以预先计算。
-
避免数组查找（索引）。索引数组中的对象比直接引用慢。例如，主循环索引
|有11次。使用myObject循环，以便每次迭代仅进行一次数组查找，并且该计数器是性能更高的内部计数器。 （请参见示例） -
尽管这样做会降低性能，但如果在较慢的渲染设备上分离更新和渲染循环，则可以通过为每个渲染帧更新两次游戏状态来获得性能。例如，如果您两次检测到此更新状态，则缓慢的渲染设备降至30FPS，游戏速度降至一半速度，然后渲染一次。游戏仍然会以30FPS的速度呈现，但仍会以正常的速度播放（甚至在您将渲染负载减半的情况下，甚至还可以保存偶尔的下垂帧）
不要试图使用增量时间，这会带来一些负面的性能开销（对于许多可以为Ints的值，Force会加倍），并且实际上会降低动画质量。
-
尽可能避免条件分支，或使用性能更高的替代方法。在您的示例中，例如，EG使用if语句跨边界循环对象。可以使用余数运算符
for of（请参见示例）您选中
%。不需要，因为旋转是循环的。360的值与44444160相同。（rotation > 360与Math.PI * 2的旋转相同）
非性能点。
每个动画调用都为下一（即将发生的）显示刷新准备框架。在您的代码中，您将显示游戏状态，然后进行更新。这意味着您的游戏状态比客户看到的要早一帧。始终更新状态，然后显示。
示例
此示例为对象添加了一些额外的负担
- 可以朝任何方向
- 具有各自的速度和旋转度
- 不要在边缘眨眼。
该示例包括一个实用程序，该实用程序尝试通过更改对象数量来平衡帧速率。
每180帧会更新一次加载。最终它将达到稳定的速度。
不要通过运行此代码段来评估性能，因此，这些代码段位于运行该页面的所有代码下，还对代码进行了修改和监视（以防止无限循环）。您看到的代码不是在代码段中运行的代码。仅移动鼠标会在SO代码段中导致数十帧丢失
要获得准确的结果，请复制代码并在页面上单独运行（删除测试时浏览器上的所有扩展名）
使用此代码或类似代码定期测试您的代码，并帮助您获得了解性能优缺点的经验。
价目表文字的含义。
- +/-为下一个周期添加或删除的对象
- 上一期间每帧渲染的对象总数
- 数字渲染时间的运行平均值（以毫秒为单位）（不是帧速率）
- 数字FPS是最佳的平均帧速率。
- 期间删除的数字帧。丢帧是所报告帧速率的长度。即
Math.PI * 246912五个丢帧为30fps，丢帧的总时间为"30fps 5dropped"
5 * (1000 / 30)const IMAGE_SIZE = 10;
const IMAGE_DIAGONAL = (IMAGE_SIZE ** 2 * 2) ** 0.5 / 2;
const DISPLAY_WIDTH = 800;
const DISPLAY_HEIGHT = 800;
const DISPLAY_OFFSET_WIDTH = DISPLAY_WIDTH + IMAGE_DIAGONAL * 2;
const DISPLAY_OFFSET_HEIGHT = DISPLAY_HEIGHT + IMAGE_DIAGONAL * 2;
const PERFORMANCE_SAMPLE_INTERVAL = 180; // rendered frames
const INIT_OBJ_COUNT = 500;
const MAX_CPU_COST = 8; // in ms
const MAX_ADD_OBJ = 50;
canvas.width = DISPLAY_WIDTH;
canvas.height = DISPLAY_HEIGHT;
requestAnimationFrame(start);
function createImage() {
const image = new OffscreenCanvas(IMAGE_SIZE,IMAGE_SIZE);
const ctx = image.getContext('2d');
ctx.fillRect(0,IMAGE_SIZE / 4,IMAGE_SIZE,IMAGE_SIZE / 2);
ctx.fillRect(0,IMAGE_SIZE);
ctx.fillRect(IMAGE_SIZE * (3/4),IMAGE_SIZE);
image.neg_half_width = -IMAGE_SIZE / 2; // snake case to ensure future proof (no name clash)
image.neg_half_height = -IMAGE_SIZE / 2; // use of Image API
return image;
}
function createObject() {
return {
x : Math.random() * DISPLAY_WIDTH,y : Math.random() * DISPLAY_HEIGHT,r : Math.random() * Math.PI * 2,dx: (Math.random() - 0.5) * 2,dy: (Math.random() - 0.5) * 2,dr: (Math.random() - 0.5) * 0.1,};
}
function createObjects() {
const objects = [];
var i = INIT_OBJ_COUNT;
while (i--) { objects.push(createObject()) }
return objects;
}
function update(objects){
for (const obj of objects) {
obj.x = ((obj.x + DISPLAY_OFFSET_WIDTH + obj.dx) % DISPLAY_OFFSET_WIDTH);
obj.y = ((obj.y + DISPLAY_OFFSET_HEIGHT + obj.dy) % DISPLAY_OFFSET_HEIGHT);
obj.r += obj.dr;
}
}
function render(ctx,img,objects){
for (const obj of objects) { drawImage(ctx,obj) }
}
function drawImage(ctx,image,{x,y,r}) {
const ax = Math.cos(r),ay = Math.sin(r);
ctx.setTransform(ax,x - IMAGE_DIAGONAL,y - IMAGE_DIAGONAL);
ctx.drawImage(image,image.neg_half_width,image.neg_half_height);
}
function timing(framesPerTick) { // creates a running mean frame time
const samples = [0,0];
const sCount = samples.length;
var samplePos = 0;
var now = performance.now();
const maxRate = framesPerTick * (1000 / 60);
const API = {
get FPS() {
var time = performance.now();
const FPS = 1000 / ((time - now) / framesPerTick);
const dropped = ((time - now) - maxRate) / (1000 / 60) | 0;
now = time;
if (FPS > 30) { return "60fps " + dropped + "dropped" };
if (FPS > 20) { return "30fps " + (dropped / 2 | 0) + "dropped" };
if (FPS > 15) { return "20fps " + (dropped / 3 | 0) + "dropped" };
if (FPS > 10) { return "15fps " + (dropped / 4 | 0) + "dropped" };
return "Too slow";
},time(time) { samples[(samplePos++) % sCount] = time },get mean() { return samples.reduce((total,val) => total += val,0) / sCount },};
return API;
}
function updateStats(CPUCost,objects) {
const fps = CPUCost.FPS;
const mean = CPUCost.mean;
const cost = mean / objects.length; // estimate per object CPU cost
const count = MAX_CPU_COST / cost | 0;
const objCount = objects.length;
var str = "0";
if (count < objects.length) {
str = "" + (count - objects.length);
objects.length = count;
} else if (count > objects.length + MAX_ADD_OBJ) {
let i = MAX_ADD_OBJ;
while (i--) {
objects.push(createObject());
}
str = "+" + MAX_ADD_OBJ;
}
info.textContent = str + " " + objCount + " sprites " + mean.toFixed(3) + "ms " + fps;
}
function start() {
var frameCount = 0;
const CPUCost = timing(PERFORMANCE_SAMPLE_INTERVAL);
const ctx = canvas.getContext('2d');
const image = createImage();
const objects = createObjects();
function frame(time) {
frameCount ++;
const start = performance.now();
ctx.setTransform(1,1,0);
ctx.clearRect(0,DISPLAY_WIDTH,DISPLAY_WIDTH);
update(objects);
render(ctx,objects);
requestAnimationFrame(frame);
CPUCost.time(performance.now() - start);
if (frameCount % PERFORMANCE_SAMPLE_INTERVAL === 0) {
updateStats(CPUCost,objects);
}
}
requestAnimationFrame(frame);
}#info {
position: absolute;
top: 10px;
left: 10px;
background: #DDD;
font-family: arial;
font-size: 18px;
}