【发布时间】：2020-06-03 09:53:41
【问题描述】：
我正在学习 JavaScript，拥有八年的 Python 经验，作为练习，我制作了一个 Mandelbrot 渲染器，它生成分形并使用 putImageData 一次从左到右更新画布一个单像素列.
我发现通过这种方法，浏览器中的可见图像仅在全屏计算完成时才会更新（而不是像我想要的那样从左到右逐渐显示）。我知道这是预期的行为，所以我决定使用requestAnimationFrame 添加“扫描线”动画。 （就像在这里看到的东西：Christian Stigen Larsen renderer）
我的期望是，较轻的计算应该渲染得更快（因为下一帧更快可用），而更高迭代的计算应该渲染得更慢。我发现我的实现是扫描线一直很慢。
我已将此问题与我的 Mandelbrot 计算无关，因为这种行为也发生在以下最小情况下。我在 Chrome 83 上运行它，看到画布从左到右以恒定速率（大约每秒 30 像素）非常缓慢地填充。
我对 rAF 的实施是错误的还是我的期望是错误的？我链接到的渲染器使用setTimeout() 来制作动画，但我读到现在这种做法被广泛劝阻。
我应该如何以可用的最高帧速率对我的画布进行从左到右的扫描更新（我现在不担心限制它）？
编辑： 为清楚起见，下面的代码在 rAF 的每个帧请求处绘制一个细长的矩形，并且花费完全相同相同的时间来绘制整个画布作为 100 次迭代的 Mandelbrot 渲染。
这表明它的缓慢不是由于帧之间发生的计算量。
const canvas = document.querySelector('.myCanvas');
const width = window.innerWidth;
const height = window.innerHeight;
const ctx = canvas.getContext('2d');
function anim(timestamp, i) {
if (i < width) {
ctx.fillRect(i, 0, 1, height);
window.requestAnimationFrame(function(timestamp) {
anim(timestamp, i + 1);
})
}
}
ctx.fillStyle = 'rgb(0,0,0)';
window.requestAnimationFrame(function(timestamp) {
anim(timestamp, 0);
});<!DOCTYPE html>
<html lang="en">
<head>
<canvas class="myCanvas">
<p>Add suitable fallback here.</p>
</canvas>
<script src="slow%20rAF.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<meta charset="UTF-8">
<title>Mandelbrot</title>
</head>
<body>
</body>
</html>【问题讨论】：
标签： javascript requestanimationframe