javascript - 为什么我的 paperjs 应用程序占用如此多的 CPU 资源并且速度变慢？

Question

我有this Sketch .您可以通过使用向上加速和左右旋转船舶方向来驾驶船舶。 (尽管由于无法从编辑器中模糊，因此它并不总是适用于 Sketch，因此按键事件不会在 Canvas 窗口中注册)

每一帧它都会将船舶当前质心的点添加到完整的船舶轨迹中。这一切都很好而且花花公子。飞行约 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