Javascript游戏循环
我有一些关于JavaScript循环的问题 问题:Javascript游戏循环,javascript,html,canvas,game-loop,Javascript,Html,Canvas,Game Loop,我有一些关于JavaScript循环的问题 问题: 为什么JavaScript循环会冻结浏览器 为什么绘图速度很慢，即使它以每1ms绘制一次的速度运行，而且它绘制的是最简单的东西 解决办法是什么？flash快死了，我们现在该怎么办 以下是您自己尝试的画布代码： <!doctype html> <html> <head> </head> <body> <canvas id="c" width="400" height="
- 为什么JavaScript循环会冻结浏览器
- 为什么绘图速度很慢，即使它以每1ms绘制一次的速度运行，而且它绘制的是最简单的东西
- 解决办法是什么？flash快死了，我们现在该怎么办
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="c" width="400" height="400"></canvas>
<script type="text/javascript">
var c = document.getElementById( 'c' );
ctx = c.getContext( '2d' );
var x = 100;
ctx.fillStyle= '#f00';
function loop()
{
ctx.fillRect( x, 100, 20, 20 );
++x;
}
setInterval( loop, 1 );
</script>
</body>
</html>
var c=document.getElementById（'c'）；
ctx=c.getContext（'2d'）；
var x=100；
ctx.fillStyle='#f00'；
函数循环（）
{
ctx.fillRect（x，100，20，20）；
++x；
}
设置间隔（循环，1）；
这段时间间隔如此之短，以至于您的代码将几乎连续地在UI线程中运行，从而使浏览器没有响应 您需要保留暂停，以便用户有时间与页面交互 使用至少十毫秒（最好是一百毫秒）的间隔 为什么JavaScript循环冻结浏览器（在C++中没有发生）
JavaScript是单线程的。当javascript代码运行或出现竞争条件时，DOM的状态不能更改。这意味着无拉伸/回流 为什么绘图速度很慢，即使它以每1ms绘制一次的速度运行，而且它绘制的是最简单的东西 它不是以1ms的速度运行，而是以10ms的速度运行，因为浏览器不允许您严格循环 解决办法是什么？flash快死了，我们现在该怎么办 使用requestAnimationFrame以60 FPS的速度运行游戏，为什么需要更多 这对我来说很顺利。 由于canvas元素占用内存，导致帧率下降并最终导致浏览器冻结。我已经回答了这个问题。你可以找到线 每次在画布上绘制某些内容时，该操作都会保存到画布的路径。每次在画布上绘制某些内容时，此路径会占用更多内存。如果不清空画布的路径，则会降低帧率。例如，查看javascript和下面清除画布路径的javascript之间的执行时间差
var c=document.getElementById（'c'）；
ctx=c.getContext（'2d'）；
var x=100；
ctx.fillStyle='#f00'；
函数循环（）
{
ctx.beginPath（）；
ctx.fillRect（x，100，20，20）；
++x；
}
设置间隔（循环，1）；
setInterval（）window.requestAnimationFrame（）