实时数据绘制性能HTML5画布vs Dom追加

Real time data plotting performance HTML5 canvas vs Dom appending

本文关键字：vs Dom 追加 画布 HTML5 数据 绘制 性能 实时      更新时间：2023-09-26

我有一些实时数据:3个随时间变化的整数。这些整数来自我的加速度计读数:x, y和z。我在想一个方法把这些数据画出来，这样就更容易看出变化的趋势。

有许多图表库，如flot。我要做的是把整数表示成杆高。我可以使用两种方法来显示条形图:

  1. 使用div作为将被附加到父div的栏。

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

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

在某种程度上，这取决于，它将取决于以下几个因素:

  • 你需要更新的项目数量(你说的是10个，100个，1000个或更多)
  • 你想要更新的频率将是一个很大的因素，你的限制基于浏览器可以执行JavaScript的速度。
  • 浏览器-一些浏览器可以以明显不同的速度呈现内容。
比较D3的一些性能比较是一个很好的例子。因为核心库在下面做同样的工作，所以这是在比较SVG(基于DOM)和Canvas呈现之间的呈现速度。先来看看这两个群的例子:
  • 帆布群
    • SVG群

如果你开始增加项目的频率和数量，Canvas的表现将超过SVG，因为它对浏览器来说是一个更轻的工作量。它不需要以同样的方式操作DOM，检查要应用的CSS规则等等。然而，由于这些原因，SVG更加强大。

在D3 google组的这篇文章中有一个非常好的性能细分，比较了浏览器的渲染时间。拿出一些数字作为例子(尽管这些数字有点老了):
  • Chrome在Canvas上渲染SVG的速度慢了74倍。
  • Firefox在Canvas上渲染SVG时速度慢150倍。
  • Opera在SVG上的闪电速度很快，但在渲染画布时比SVG慢了71倍。

这张图显示了柱状图和DOM/div方法。您可以单独或一起运行它们，并与任务管理器比较外观和cpu负载。

这是基于我对这个问题的回答(这给了图表Windows 7 Task Manager风格)

两个方法的更新循环:

function update() {
    GetData();
    $.plot($("#placeholder"), dataset, options)
    timerFlot = setTimeout(update, updateInterval);
}
function updateDom() {
    GetData();
    $('#domtest').html('');
    for (var i = 0; i < data.length && i < 100; i++) {
        $('#domtest').append('<div class="bar" style="height: ' + (3 * data[i][3]).toString() + 'px; top: ' + (300 - 3 * data[i][4]).toString() + 'px;"></div>');
    }
    timerDom = setTimeout(updateDom, updateInterval);
}

我建议使用d3和一个免费的图表库来绘制条形图。然后可以使用svg，它比附加dom节点性能更高。我会查看c3

我同意Sean关于D3的回答。将其与jQuery或D3的原生json处理相结合，您可以非常快速地提取数据。例如，我编写了一些代码来提取包含1000条记录的LDAP查询数据，周转时间为1秒左右。但那是服务器端。

在呈现方面，请参阅这些比较画布和SVG呈现性能差异的示例。它本身并不是一个基准，但是你可以很清楚地看到性能不是问题。

bl.ocks.org/mbostock/1276463 - bl.ocks.org/mbostock/1062544 - bl.ocks.org/mbostock/9539958

但是对于你关于图表的问题，D3非常优雅地处理数据连接的数据更新。这是一篇关于随时间更新数据系列的好文章。bost.ocks.org/mike/path/

希望对你有帮助。

我建议使用Canvas方法。

更改Dom元素会导致调用Dom repaint来绘制屏幕上的元素。在你的情况下，有3个元素会经常变化。

动画的内部操作是这样的:将高度为x的元素更改为x+3。第一步，浏览器将元素的高度更改为+1，重新绘制并调整其中的所有子元素。然后将其增加+1，重新绘制和调整孩子，等等。每次它改变元素时，浏览器内部都会发生很多变化。

来到画布:它就像一个画板，无论你增加或减少多少次循环，画布都不会进行任何迭代的绘画调用。

相关文章：