Я реализую игру, используя холст в качестве средства визуализации, и есть некоторые моменты, когда кажется, что между кадрами рендеринга возникают чрезмерные «ожидания», и я понятия не имею, что об этом думать.
Я работал над этим последние несколько недель, и по большей части проблем не было. Однако, когда на экране много вещей, по некоторым причинам возникает «ожидание».
Требуется примерно столько же времени, сколько кода рендеринга, прежде чем вызываться «составные слои». Я не знаю, могу ли я это предотвратить, или мне просто нужно с этим жить. В любом случае, я только достигаю точки, где в экстремальных ситуациях я опускаюсь ниже 60 кадров в секунду.
Другой пример:
index.js
window.onload = () => {
const width = 1280;
const height = 720;
const canvas = document.getElementById("game-canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
function renderLoop() {
console.time("render");
// Do render and request next frame
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 13000; i++) {
// Not real code this is just to demonstrate the issue
ctx.fillRect(i % width, 10 * Math.floor(i / (width)), 10, 10);
}
console.timeEnd("render");
requestAnimationFrame(renderLoop);
}
requestAnimationFrame(renderLoop);
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
canvas {
border: 2px solid black;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<script src="./index.js"></script>
<canvas id="game-canvas"></canvas>
</body>
</html>