我需要显示一个很长的区域（没有定义的长度）和许多多边形（简单的形状 - 圆形，正方形，一些文本）。显然，我一次只能看到一小块碎片。主要问题是高效滚动和处理鼠标事件。我在GWT写作。我到目前为止所考虑的事情：
1）画布。创建一个可见区域大小的画布。创建大于可见区域的缓冲区画布。渲染到缓冲区（仅在更改时 - 如果在可见区域中更改了某些内容或在滚动期间向右/左移动了新部分）。并在需要时，将缓冲区的适当部分渲染到可见画布。这似乎足够快。但！我必须实现这种智能缓冲，决定哪些部分需要重新渲染，哪些不需要。我需要记住检测鼠标点击和鼠标悬停的所有对象（它应该是一些很好的结构，如间隔树或段树，因为鼠标悬停检查非常频繁 - 但这已经在浏览器中实现，听起来像重新发明轮子） - 这是很多工作！ 也许已经准备好了什么？
2）html（divs / images） - 所以，我们的想法是使用div和图像渲染所有元素（图像可以先在画布上生成，但不会生成）。将它们绝对放在一个长div上并使用浏览器滚动来滚动div。工作直到你到达这个长div的末尾，你需要重新定位所有内容，以便有更多的空间滚动（这将冻结滚动一段时间）。所以也许有可能在同时渲染第二个div然后切换它们。它可能会起作用，但这听起来像一个黑客，它可能会出现严重的问题，一次可见多个对象。加上在浏览器中实现的鼠标事件。
3）SVG - 我没试过，但我想我会遇到与html / div相同的性能问题（滚动到右/左时）
有什么想法吗？哪种方法最好？有更好的吗？ WebGL（它不会在IE中工作并移植到IE将是困难的）。我该如何实现呢？
答案 0 :(得分：0)
您似乎了解利弊。画布更快，但它的级别更低，因此编码更难。由于事件处理和对象访问，DOM速度较慢但编码更容易。如果DOM太慢，则必须使用画布。
一种可能的折衷方案是渲染完整的画布并使用overflow:hidden剪辑它。这就是我在波形显示器上所做的工作。
对于形状，SVG应该比DOM更容易。由于SVG不是完全跨浏览器，因此您应该使用类似http://raphaeljs.com/
的内容答案 1 :(得分：0)
我会选择画布，因为它相对较快。
就屏幕外定位，鼠标事件和重新渲染而言 - 可以使用像Fabric.js这样的画布库来处理它。看看demos。
Event inspector demo＆amp; working with events tutorial可能会有用。
默认情况下，屏幕外（非）渲染处理。只需将对象放在屏幕外坐标处，它们就不会显示。