我正在使用新的web音频api开发html5音频应用程序，我需要的是一个“pianoroll”，一个键盘网格，用户可以像大多数音乐制作软件一样在其中画笔记，我正在考虑两种创建方法。
创建一个大的html表并在单元格中创建标记以绘制注释
PRO note操作很简单，因为我们使用的是html元素，可以使用它们的事件和方法。
CON我做了一些使用大表的项目，我的经验浏览器在处理这么多元素时往往会变慢。
创建画布以呈现网格和注释
如果与具有智能缓存的大型表相比，PRO的渲染速度可能更快
CON需要更多的努力才能使笔记操作起作用。
CON仍在滚动一个巨大的图像。
我需要使用资源友好的方法，因为音频的呈现不应该受到响应速度慢的界面的影响，用户应该能够在pianoroll中滚动而不会出现任何故障。
我可以创建一个具有视窗大小的画布，让它在用户滚动时呈现，我不知道这是否会更快，有一个更小的画布，但它需要重新呈现更多。
对于表，我可以使用固定的单元格，当需要显示注释时，将注释放入其中（addChild，innerHTML），但不会有任何平滑的滚动，因为它只能按网格大小滚动（如果足够快，这不是一个大问题），而且还需要比静态表更多的重新呈现。
有什么我忽略了的，哪种解决方案对资源最友好？
最佳答案
我不会碰这里的桌子，因为你提到的两个原因，而且把黑色的钥匙很好地插进去是很麻烦的。
我倾向于画布，因为它真的很快，你的资源使用是固定的：只是钢琴滚动的像素。钢琴键也是矩形的，所以选择逻辑也不会太糟糕。
但是，如果您确实希望将关键点作为具有事件的对象，那么正如abesto所提到的，矢量图形是可行的方法。jsmbostock.github.com/d3/是一个很好的基于DOM的可视化js库，它可以帮助创建滚动、为键分配事件以及平滑地设置滚动动画。您可以使用它来呈现HTML（比如div）或SVG。