Question

我有一个大画布（2000x2000）和许多矩形对象（738）

使用这个画布，我有问题能够移动对象，应用程序很容易被阻止而且不流动

我试图将画布的大小减小到400x400，并且速度提高了很多，而且它没有使用那么多的内存。

这是什么原因？我可以使用fabricJS的新objectCaching属性进行改进吗？

我留下一个例子fiddle

var canvas = new fabric.Canvas('canvas');
canvas.setDimensions({width:2000, height: 2000});

我不能保留示例的完整代码，因为它太大了。它是一个具有我的对象结构的JSON

修改我们已经看到罪魁祸首与画布用户可用的内存和使用的浏览器有关。

我们相信在这些方面几乎无能为力。

Answer 1

所以2000x2000是一个大画布，你不应该用它来平移逻辑。

保持画布与显示它一样大，然后只使用平移移动。这是第一步。（查看本教程以进行平移http://fabricjs.com/fabric-intro-part-5#pan_zoom）

将画布缩小将检测不可见的对象并跳过渲染，这将节省渲染时间。

另一件事可能是组相似的对象togheter，因此结构可以优化分组rects的渲染，如果你有738个对象，你需要为你的应用程序用例找到特定的优化。

Answer 2

感谢Andrea，我已经做出了你建议的更改，我发现性能已经提高了很多。我看到隐藏了一个非常大的组，移动视口，性能提高了很多，而不是有一个过大的画布。