Javascript/canvas：实时绘制折线，最优的数据结构是什么？答案

【问题标题】：Javascript/canvas: draw polylines in real-time, what is the optimal data structure?Javascript/canvas：实时绘制折线，最优的数据结构是什么？
【发布时间】：2011-05-12 12:50:30
【问题描述】：

我们使用 Javascript 根据一些空间和时间坐标在 <canvas> 元素上绘制折线。具体来说，直线中的每个点都具有以下属性：

* point.x
* point.y
* point.time

意思是当时point.time 我们将多段线延长到point.x/point.y。作为基于时间的，所有点集的数据结构必须在访问时间方面尽可能高效。

直观地说，我相信带有3 x N 元素（对于N 个节点）的简单数组效果最好。

您对合适的结构还有其他建议吗？

【问题讨论】：

标签： javascript performance data-structures html canvas

【解决方案1】：

您无法访问指针或其他任何东西，因此您基本上只能在 JavaScript 中使用数组和对象。

由于您的问题相当简单，并且只需要线性访问，[x, y, t, x, y, t, x, y, t] 数组确实应该是访问这些东西的最快方式。

但是请记住，访问数据不会是这里的限制因素，<canvas> 绘图性能，特别是在没有硬件加速的浏览器中（目前仍然是大多数），如果你使用它，将会非常糟糕要么是一张非常大的画布，要么是在很短的时间内有很多行。

最后但同样重要的是，测试一下，不要对性能做出假设，记住：
“过早的优化是万恶之源”

【讨论】：

【解决方案2】：

我希望那个点是一个对象的对象，时间键存储坐标，比如

   point = {
      <time1> : {
         x : ... ,
         y : ...
      },
      <time2> : {
         x : ... ,
         y : ...
      },
      ...

   }

因此您可以直接使用point.time.x 和point.time.y 访问，因为x 和y 与特定时间相关（如果我很好理解的话）

相反，对于给定特定时间的平面数组，您应该进行偏移操作来检索 x 和 y，不是那么优雅

【讨论】：