Question

我对JavaScript循环有一些疑问。

问题：

为什么JavaScript循环会冻结浏览器
为什么绘图速度慢，即使它每1分钟以1次绘制运行，它绘制的是最简单的东西！
解决方案是什么？闪光灯即将消亡，我们现在该怎么做？

以下是您自己尝试的画布代码：

<!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>

Answer 1

为什么JavaScript循环会冻结浏览器（在C ++中不会发生）

JavaScript是单线程的。在javascript代码运行或竞争条件发生时，DOM的状态不能改变。这意味着没有绘图/回流。

为什么绘图速度慢，即使每1毫秒绘制一次，也是最简单的事情！

它没有以1ms运行，它以10ms运行，因为浏览器不允许你紧紧地循环。

解决方案是什么？闪光灯即将消亡，我们现在该做什么？

使用requestAnimationFrame并以60 FPS运行游戏，为什么还需要更多？

Example using (webkit) requestAnimationFrame为我顺利运行。

Answer 2

一毫秒是一个非常短的间隔这是一个很短的间隔，你的代码几乎不断地在UI线程中运行，让浏览器没有响应。

您需要暂停，以便用户有时间与该页面进行互动。

使用至少十，优选一百毫秒的间隔。

Answer 3

由于canvas元素占用的内存，导致帧率下降并最终导致浏览器冻结的原因。我已经回答了这个问题。你可以找到线程here。

每次向画布绘制一些内容时，操作都会保存到画布的路径中。每次在画布上绘制内容时，此路径占用的内存更多。如果不清空画布的路径，则会出现帧率下降。例如，查看javascript和下面清除画布路径的javascript之间的执行时间差异

var c = document.getElementById( 'c' );
ctx = c.getContext( '2d' );
var x = 100;
ctx.fillStyle= '#f00';

function loop()
{
    ctx.beginPath(); 
    ctx.fillRect( x, 100, 20, 20 );

    ++x;
}
setInterval( loop, 1 );

Javascript游戏循环

3 个答案: