如何获得基于Javascript的图表库的渲染性能

How to get Render Performance for Javascript based Charting Libraries?

本文关键字：性能 Javascript 何获得      更新时间：2023-11-15

在前言中，我对Javascript编程还很陌生，但我已经使用各种库有一段时间了。我的任务是获得各种图表库的性能指标，以根据一些可用的库（例如AmCharts、HighCharts、SyncFusion等）找到最快、最灵活的。我曾尝试在头中的Javascript代码中使用performance.now（），并将其包裹在显示图表的标记周围，但这两种方法都不起作用。

基于渲染获取这些性能指标的最佳方法是什么？

简短回答：

任一：

  1. 在图表代码执行之前开始计时，并设置一个MutationObserver来观察DOM，并在所有突变结束时结束时间
  2. 查看图表库是否有done（）事件（但要小心，因为这可能不准确，具体取决于实现/库。"done（）"可能意味着视觉上已经完成，但后台工作仍在执行中。这可能会导致交互不稳定，直到图表完全准备好为止）

长答案：

我假设您的测试数据相当大，因为大多数库可以处理几千个点，而不会有任何可忽略的降级。衡量客户端图表库的性能实际上是一个双面问题：渲染时间和可用性渲染时间可以通过库将数据集解释为图表的视觉表示的持续时间来衡量。根据每个库的解释算法，您的里程数会因数据大小而异。假设库X使用了主动采样算法，并且只需要绘制数据集的一小部分。性能将非常快，但它可能是数据集的准确表示，也可能不是。更重要的是，在更精细的细节上的交互性可能会受到限制。

这让我想到了性能的可用性和交互性。我们使用的是电脑，而不是一张纸上的图表；它应该尽可能具有交互性。然而，随着交互量的增加，浏览器可能会因库的实现而变慢。如果您的一百万个数据点中的每一个都是交互式dom节点，该怎么办？100万个数据点肯定会使浏览器崩溃。

大多数图表库都以不同的方式处理性能、准确性和可用性之间的权衡。至于是什么，这完全取决于实施情况。

插件/来源：我是ZingChart的一名开发人员，我们一直用大型数据集与客户打交道。我们还构建了与您的测试非常相关的功能：http://www.zingchart.com/demos/zingchart-vs/

我的方法非常基本。我用当前时间创建了一个var，然后用代码块结束的时间和差异调用console.log（）。

var start = +new Date();
//do lots of cool stuff
console.log('Rendered in ' + (new Date() - start) + ' ms');

非常普通，按照罐头上写的做。如果你想测量代码的每一部分，你就必须制作新的时隙。是的，计算需要时间。但与我想要测量的代码相比，这是微不足道的。jsFiddle上的示例。

相关文章：