实时数据绘图性能HTML5 canvas vs Dom附加

Question

我有一些实时数据：3个随时间变化的整数。这些整数是从我的加速度计读数：x，y，和z。我当时正在考虑一种绘制这些数据的方法，以便更容易对趋势进行趋势分析。

有很多图表库，例如flot。我想做的是将整数表示为条形高度。我可以使用两种方法显示条形图：

1. 将div用于将添加到父div的条。

2. 使用HTML5画布绘制表示整数的条形图。

我的问题是：从性能的角度来看，这两种方法中哪一种会更好，假设数据更新频率为50毫秒（即数据每50毫秒更改一次）。

Answer 1

在一定程度上，这取决于几个因素：

• 您需要更新的项目数（您说的是10s，100s，1000s或更多）
• 您想要更新的频率将是一个很大的因素，您会因浏览器执行JavaScript的速度而受到限制。
• 浏览器-一些浏览器可以以明显不同的速度渲染内容。

一个比较好的例子是查看一些D3性能比较。因为核心库在下面做了相同的工作，所以这是在比较SVG（基于DOM）和Canvas渲染之间的渲染速度。首先看一下这两个群体示例：

• 帆布群
• SVG群

如果您开始扩大频率，并且Canvas的项目数量将超过SVG，因为对于浏览器来说它的工作量要轻得多。它不必以相同的方式操作DOM，检查CSS规则是否适用等。但是，由于这些原因，SVG的功能更强大。

D3 google小组的这篇文章比较了浏览器的渲染时间，其性能确实很好。以一些数字为例（尽管这些数字有些旧）：

• Chrome的SVG渲染速度比Canvas慢74倍。
• Firefox通过Canvas渲染SVG的速度降低了150倍。
• Opera在SVG上变亮得很快，但在渲染Canvas上比SVG慢71倍。