与10.000个物体互动的高性能

Question

我需要在网页上显示大约10.000个圈子。每个圆圈都必须绑定到数据。我还需要与我的圈子互动如下：

• 如果我将鼠标悬停在它们上面（例如突出显示）
，则更改css
• 如果我点击它就访问数据

我尝试了三种实现：

• 一到D3生成SVG
• 再次通过D3来生成div，以模仿＆＃34;模拟＆＃34;界
• 一个通过Fabricjs来浏览画布

对于div解决方案，它只是丑陋，因为我的圈子并不总是完美的圆形。 对于SVG和canvas，它使用起来很慢。

如何在不减少显示圈数的情况下提高表现，并且还能看到漂亮的东西？

Answer 1

可能减慢你速度的是检测鼠标 - 对象重叠，这是浏览器的一般功能，因此没有特别优化。好消息是你可以自己轻松优化。考虑这种方法：

• 将圆圈渲染到画布中。在整个交互过程中画布将是静态的。无需重新绘制内容。
• 检测鼠标是否在圆圈上很容易实现。你知道圆心的位置，你知道鼠标的位置，你知道数学。因此，您可以自己在鼠标光标下搜索圆圈。
• 此外，您可以利用例如quadtree结构将圈子中心组织成一个层次结构，以大大加快搜索过程。
• 您可以在鼠标光标上方绘制另一个圆圈，而不是在鼠标光标下更改圆圈的CSS。在div上单独canvas执行此操作，以便不需要重新绘制基础canvas。