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

在前言中，我对Javascript编程相当陌生，但我已经使用各种库工作了一段时间。我的任务是获取各种图表库的性能指标，以根据一些可用的库（例如AmCharts、HighCharts、SyncFusion等）找到最快、最灵活的。我尝试过JSPerf，似乎我得到的是代码执行的性能指标，而不是我们想要的实际呈现的图表（即用户体验）。我尝试在页眉中的Javascript代码中使用performance.now（），也尝试在显示图表的标记周围使用performance.now（），但这两种方法都不起作用

---

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

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

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

---

非常通用，并且按照罐头上的说明执行。如果您想测量代码的每一部分，您必须创建新的时隙。是的，计算需要时间。但是，与我想要度量的代码相比，它是微不足道的。行动示例。

简短回答：

要么：

在图表代码执行之前开始计时，并设置一个MutationObserver来监视DOM，并在所有变异结束时结束计时

了解图表库是否有done（）事件。（但要小心，因为这可能不准确，具体取决于实现/库。“done（）”可能意味着视觉上完成了，但后台工作仍在进行。这可能会导致交互性不稳定，直到图表完全准备好为止）

长答案：

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

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

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

---

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

这就是我现在使用的：

var perfOneLineOneBegin=performance.now（）所做的工作//do stuff var perfonelinend=performance.now（）；log（“带有1行和2500 DP的折线图花费了“+（perfonelineend-perfonelinebegin）+”毫秒。”）

但是，这只是超时脚本执行，而不是页面的渲染/绘制方面。例如，如果我加载一组图表，我的performance.now（）将返回15毫秒的报告，但实际上加载大约需要6.4秒。我不确定其他的图表库，但是在Highcharts中我会使用回调来确定渲染时间：

$（“#容器”）.Highcharts（选项，函数（图表）{console.log（…）；}）-否则，像IE8这样的浏览器可能会返回错误的渲染时间（关于添加到DOM和JS执行中的多线程）。无论如何，在Highcharts中，我们有一个简单的测试页面。当然，Highstock可以处理比Highcharts更多的数据点。谢谢你的回答。实际上，我们并没有测试大量数据，因为我们自己“毁灭”了它，所以在任何给定的时间，最多会显示大约3K个数据点。所以我们实际上只测试了那么多数据点，但我们在屏幕上测试了多个图表。ZingCharts明确列出了我们要评估的图书馆的短名单，因此我感谢您的回复。