Question

我目前优化我的html5画布等距游戏。

所以我刚刚实施了两幅画布

第一个适用于 tiles＆amp;墙壁（保持静止，仅绘制一次）
第二适用于动画实体（始终为动画制作）

两幅画布都使用屏幕分辨率（在我的电脑上1920x1080）。

我使用requestAnimationFrame动画第二画布（实体的画布），但我注意到我是使用大量的UC 用于小动画（70 x 100 px）用户：我的游戏使用大约9％的UC只是为了在1920x1080上绘制单个用户 画布。

如何优化此功能？

编辑：演示

＆＃13;

var canvas = document.getElementsByTagName("canvas")[0];
var ctx    = canvas.getContext("2d");

// This width/height is to simulate my current computer resolution (my game is fullscreen)

var Mario    = new Image();
Mario.onload = () => LoadMario2();
Mario.src    = "http://i.imgur.com/ZP7NDFh.png"

var Mario2;

function LoadMario2() {
    Mario2 = new Image();
    Mario2.onload = () => ready();
    Mario2.src = "http://i.imgur.com/5suGJkq.png"
}

canvas.width  = 1920;
canvas.height = 1080;

var i = true;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.imageSmoothingEnabled = false; 
  
    ctx.drawImage(i == true ? Mario : Mario2, 600, 700)
  
    requestAnimationFrame(draw)
}

function ready() {
  setInterval(() => i = !i, 500);
  draw()
}

＆＃13;

Scroll to find Mario
<canvas></canvas>

＆＃13;

或https://codepen.io/anon/pen/qmMVEp

Answer 1

Javascript渲染性能

要从任何代码中获得最佳性能，您必须了解代码如何影响性能。唯一的方法是通过对代码进行基准测试。如果你知道一种方法比另一种方法更快，你就不能依赖听到说或预感，测试它并看到。在每个可用的浏览器和设备上测试它，测试每个浏览器和OS设备驱动程序更新。

您测试性能越多，您就越能感受到什么使得速度变慢以及什么使代码变慢。

下面是使用performance API测试时序并找到一些优化的示例。

当我用它中的性能代码运行它时，我在我的机器上得到了一台慢机器，渲染时间为0.074毫秒（74 / 1,000,000秒），稍微调整一下我得到了0.069ms。我做的一个改变没有给通常它应该有的差别，但因为我正在积极监控性能我可以知道它没有任何区别。

代码还显示浏览器在渲染时大多数时间处于空闲状态

＆＃13;

;(function(){   // to keep all vars used out of the global scope
            // Surprisingly that made no effect on frame render time
            // Could have something to do with SO environment.
const canvas = document.getElementsByTagName("canvas")[0];
const ctx    = canvas.getContext("2d");


// This width/height is to simulate my current computer resolution (my game is fullscreen)

const Mario    = new Image();
const Mario2 = new Image();
Mario.onload = () => LoadMario2();
Mario.src    = "http://i.imgur.com/ZP7NDFh.png"


function LoadMario2() {
    Mario2.onload = () => ready();
    Mario2.src = "http://i.imgur.com/5suGJkq.png"
}

const width = canvas.width  = 1920;
const height = canvas.height = 1080;


var i = true;
var frameTime = 0;
var frameCount = 0;
var startTime = 0
var marioImage = Mario;
 

ctx.imageSmoothingEnabled = false; 
function draw() {
    var now = performance.now();
    ctx.clearRect(0, 0, width, height);
    ctx.drawImage(marioImage, 600, 700)
    requestAnimationFrame(draw)
    frameTime += performance.now() - now;
    frameCount ++;
}
function displayFrameTime(){

    var now = performance.now();
    frameTimeEl.textContent = "Frame interval : " + ((now - startTime) / frameCount).toFixed(3) + "ms Render time : " + (frameTime /frameCount).toFixed(3) + "ms Frame idle : " + (((now - startTime) / frameCount)-(frameTime /frameCount)).toFixed(3)+"ms";
    setTimeout(displayFrameTime,1000);
}
function ready() {
  setInterval(() => marioImage = (i = !i) ? Mario : Mario2, 500);
  startTime = performance.now()
  draw()
  setTimeout(displayFrameTime,1000);

}

}());

＆＃13;

<span id="frameTimeEl"></span>
<canvas></canvas>

＆＃13;

在发布和运行代码后

编辑完全改变的时间，现在我得到了0.059ms的窥视性能当您测试代码时，您应该在您打算运行的环境中测试它JavaScript非常容易受到浏览器上下文环境的影响。

HTML5 Canvas优化

1 个答案:

Javascript渲染性能