Javascript 高性能，可与10000个对象交互

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

• 如果我将鼠标移到css上，则更改css（例如高亮显示）
• 如果我点击数据，就可以访问它

我尝试了三种实现：

• 通过D3生成SVG
• 再次通过D3生成div，对“模拟”圆进行分类
• 一次穿过画布

对于div解决方案，它只是丑陋的，因为我的圆并不总是完全圆的。 对于SVG和canvas，使用它的速度很慢

---

如何在不减少显示的圆圈数量的情况下提高性能，并且仍然有一些好看的东西？

可能会使您放慢速度的是检测鼠标对象重叠，这是浏览器的一项非常通用的功能，因此没有特别优化。好消息是你可以自己轻松地优化它。考虑这种方法：

• 将圆渲染到画布中。画布在整个交互过程中将是静态的。不需要重新绘制它的内容
• 检测鼠标是否在圆上很容易自己实现。你知道圆心的位置，你知道鼠标的位置，你知道数学。因此，您可以自己搜索鼠标光标下的圆
• 此外，您可以利用结构（例如）将圆心组织成层次结构，以极大地加快搜索过程
• 您可以在鼠标光标下绘制另一个圆，而不是更改圆的CSS。在

  canvas

  上的单独

  div

  中执行此操作，以便不需要重新绘制底层

  canvas

---

究竟谁能理解显示10000个物体的东西？你需要重新考虑你的计划UX@RobertLongson：我在天体物理学数据上制作数据。我需要展示卫星拍摄的所有“照片”。我已经用相同的坐标聚合了数据，但如果不降低精度，我就无法进一步。在评判我之前，请先看一看：从你的帖子中，我推断div解决方案表现良好，只是很难看。你有没有一个演示，我们可以看看，以试图使它更漂亮？；）哼，没办法轻松做到这一点对不起…你确定画布和SVG一样慢吗？我认为这不大可能。如果是这种情况，那么代码中的其他地方可能存在性能问题。因此，我建议您向我们展示如何在这些圆圈后面添加一个，如果可能的话（实际上，如果没有代码，这个问题在这里是离题的，“询问教程”）。然而，正如你在上面的评论中所说的，这是不可能的，这个问题无法回答，我投票关闭了它。实际上，我猜减慢我的应用程序的是绑定圈数据。只使用canvas2D而不使用交互，效果很好。因此，我认为没有现成的解决方案：）当然，您的代码中可能还有其他瓶颈。不调查就很难说。但是标记结构中的10.000个元素（无论是HTML还是SVG）都会影响性能。祝你好运，如果你需要进一步的帮助，请回来。