我正在学习JavaScript，来自八年的Python经验，作为练习，我制作了一个曼德布洛特渲染器，它可以生成分形并使用putImageData从左到右更新画布，一次一个单像素列。
我发现使用这种方法，浏览器中的可见图像仅在全屏计算完成后更新(而不是看到它像我想要的那样从左到右逐渐出现(。我知道这是预期的行为，所以我决定使用requestAnimationFrame添加"扫描线"动画。(像这里看到的：Christian Stigen Larsen渲染器(
我的期望是，较轻的计算应该渲染得更快(因为下一帧更快可用(，而更高迭代的计算应该渲染得更慢。我在实现中发现扫描线始终很慢。
我已经将这个问题与我的曼德布洛特计算有关的任何内容隔离开来，因为这种行为也发生在下面的最小情况下。我在Chrome 83上运行它，看到画布以恒定速率(约每秒30像素(从左到右非常缓慢地填充。
我的 rAF 实现不正确还是我的期望是错误的？我链接到的渲染器使用setTimeout()来制作动画，但我读到现在这是一种普遍不鼓励的做法。
我应该如何以最高的可用帧速率实现画布的从左到右扫描更新(我目前不担心限制它(？
编辑：为了清楚起见，下面的代码在rAF的每个帧请求处绘制一个细矩形，并且绘制整个画布所需的时间与100次迭代的曼德布洛特渲染完全相同。
这向我表明，它的缓慢不是由于帧之间发生的计算量。
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>没有"更快"的请求AnimationFrame。
通常，答案是将计算与渲染分开。理想情况下，计算在主线程之外进行，渲染在主线程上处理。即使没有线程，您也应该能够找到一种方法在 RAF 之外进行计算，并且只需让 RAF 渲染像素即可。