Javascript/canvas：实时绘制多段线，最佳数据结构是什么？

我们使用Javascript根据一些空间和时间坐标在

元素上绘制多段线。具体而言，直线中的每个点都具有以下特性：

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

这意味着在时间

point.time

时，我们用一个额外的线段将多段线延伸到

point.x/point.y

。基于时间，所有点集的数据结构在访问时间方面必须尽可能有效

直观地说，我相信一个包含

3xn

元素（对于N个节点）的简单数组将最有效

---

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

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

由于您的问题相当简单，并且只需要线性访问，因此

[x，y，t，x，y，t，x，y，t]

数组确实应该是访问这些内容的最快方式

但是请记住，访问数据并不是这里的限制因素，

绘图性能，特别是在没有硬件加速的浏览器中（目前仍占大多数），如果在很短的时间内绘制一个非常大的画布或多行，将非常糟糕

最后但并非最不重要的一点是，测试它，不要对性能做出假设，记住：

---

“过早优化是万恶之源”

我更希望点是对象的对象，时间键存储坐标，如

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

   }

点={
: {
x:，
y:。。。
},
: {
x:，
y:。。。
},
...
}

因此，您可以使用

point.time.x

和

point.time.y

直接访问，因为x和y与特定的时间相关（如果我理解清楚的话）

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