Javascript 要在很长的区域、画布上渲染的多个对象？

我需要显示一个很长的区域（没有定义的长度）和许多多边形（简单的形状-圆，正方形，一些文字）。显然，我一次只需要一小块可见的碎片。主要问题是高效滚动和处理鼠标事件。我用GWT写。到目前为止我考虑的事情：

1） 帆布。创建具有可见区域大小的画布。创建比可见区域更大的缓冲区画布。渲染到缓冲区（仅更改-如果在滚动过程中可见区域或右/左新部分发生更改）。必要时，将缓冲区的适当部分渲染到可见画布。这似乎足够快。但是我必须实现这个智能缓冲，决定哪些部分需要重新招标，哪些不需要。我需要记住所有的对象来检测鼠标点击和鼠标移动（应该是一些很好的结构，如间隔树或分段树，因为鼠标移动检查非常频繁-但这已经在浏览器中实现了，听起来像是重新发明轮子）-这是大量的工作 也许有东西准备好了

2） html（divs/images）-因此，我们的想法是使用div和图像呈现所有元素（图像可以首先在画布上生成，而不是metter）。将它们绝对放置在一个长div上，并使用浏览器滚动来滚动div。直到您到达这个长div的末尾，您需要重新定位所有内容，以便有更多的空间滚动（这将在一段时间内冻结滚动）。因此，也许可以同时在第二个div中进行渲染，然后切换它们。。它可能会工作，但这听起来像一个黑客，它可能会有严重的问题，多个对象可见的时间。在浏览器中实现的鼠标事件

3） SVG——我还没有尝试过，但我认为我会遇到与html/divs相同的性能问题（当向右/向左滚动时）

---

有什么想法吗？哪种方法最好？还有更好的吗？WebGL（它在IE中不起作用，移植到IE将是一个困难的问题）。我应该如何实现这一点呢？

您似乎了解其优点/缺点。画布速度更快，但级别较低，因此更难编写代码。DOM速度较慢，但由于其事件处理和对象访问，因此更易于编码。如果DOM太慢，您必须求助于画布

一种可能的折衷方法是渲染整个画布并使用

溢出：隐藏
对其进行剪辑。这就是我在波形显示器上所做的

对于形状，SVG应该比DOM更容易。由于SVG不完全是跨浏览器的，所以您应该使用类似于
的东西，因为您似乎了解其优点/缺点。画布速度更快，但级别较低，因此更难编写代码。DOM速度较慢，但由于其事件处理和对象访问，因此更易于编码。如果DOM太慢，您必须求助于画布

一种可能的折衷方法是渲染整个画布并使用
溢出：隐藏
对其进行剪辑。这就是我在波形显示器上所做的

对于形状，SVG应该比DOM更容易。因为SVG不是完全跨浏览器的，所以您应该使用类似于canvas的东西，因为它相对较快

至于屏幕外定位、鼠标事件和重新渲染，都可以通过使用类似canvas的库来完成。请看下面的图片

&可能有用

默认情况下会进行屏幕外（非）渲染。只需将对象定位在屏幕外的坐标，它们就不可见了。
我会选择canvas，因为它相对较快

至于屏幕外定位、鼠标事件和重新渲染，都可以通过使用类似canvas的库来完成。请看下面的图片

&可能有用

默认情况下会进行屏幕外（非）渲染。只需将对象放置在屏幕外坐标处，它们将不可见。
我无法渲染整个画布，区域可能是无限的。在我的情况下，画布也是无限的，它是一个时间线。我一次显示10秒，但渲染的画布长度为30秒。这样，我就不必在每个新帧上重新渲染画布，只有当缓冲区用完时，我才能渲染整个画布，区域可能是无限的。在我的情况下，画布也是无限的，它是一个时间线。我一次显示10秒，但渲染的画布长度为30秒。这样，我就不必在每一个新帧上重新渲染画布，只有在缓冲区用完的时候