为什么我的 paperjs 应用会消耗如此多 CPU 的电量并变慢？

Question

我有this Sketch。您可以通过使用向上加速和左右旋转船舶方向来驾驶船舶。（虽然由于无法从编辑器中模糊，所以它并不总是适用于 Sketch，因此按键事件不会在 canvas window 中注册）

每一帧它都会将船舶当前质心的点添加到完整的船舶轨迹中。这一切都很好而且花花公子。飞行约 2 分钟后（具体取决于您的计算机）出现问题。渐渐地，整个事情开始变慢，帧率下降到可见的水平。一开始我以为这是因为每个点都需要存储在RAM中，而且点太多了，但是tab的内存似乎并没有明显增加。 CPU 使用率似乎迅速上升到 ~20%，并且通常保持在那里。有人对此有解释或修复吗？

Answer 1

好的，我对此做了一些阅读。您在帧滴答回调中不断添加到 ship.path。尝试像这样限制路径的最大大小：

var MAX_SEGMENTS = 1000

ship.path.add(centroid(ship.shipPath));

function onFrame(event) {
    if (ship.path.length > MAX_SEGMENTS)
    {
        var d = ship.path.length - MAX_SEGMENTS
        ship.path.removeSegments(0, d)
    }

已更新sketch

为什么我的 paperjs 应用会消耗如此多 CPU 的电量并变慢？

Why does my paperjs app take so much CPU power and slow down?

javascript

canvas

paperjs