如何获得基于 Javascript 的图表库的渲染性能?
How to get Render Performance for Javascript based Charting Libraries?
作为序言,我对编程还很陌生 Javascript,但我已经使用各种库有一段时间了。我的任务是获取各种图表库的性能指标,以根据一些可用的库(例如 AmCharts、HighCharts、SyncFusion 等)找到最快和最灵活的图表库。我已经尝试过 JSPerf,看起来我正在获取代码执行的性能指标,而不是实际呈现的图表,这是我们想要的指标(也就是用户体验)。我试过在 header 中的 Javascript 代码中使用 performance.now() 并且还环绕显示图表的标签,但是这两种方法都不起作用。
根据渲染获取这些性能指标的最佳方法是什么?
我的方法真的很基础。我用当前时间创建一个 var,然后用我到达代码块末尾的时间和差异调用 console.log()。
var start = +new Date();
//do lots of cool stuff
console.log('Rendered in ' + (new Date() - start) + ' ms');
非常通用,按照包装上的说明进行操作。如果您想测量代码的每个部分,您将不得不创建新的时隙。是的,计算需要时间。但与我想要测量的代码所做的相比,它是微不足道的。 jsFiddle.
中的示例
简答:
或者:
- 在图表代码执行之前开始计时,并设置一个 MutationObserver 来观察 DOM 并在所有突变结束时结束时间。
- 查看图表库是否有 done() 事件。 (但要小心,因为这可能不准确,具体取决于 implementation/library。"done()" 可能意味着视觉上完成,但仍在执行后台工作。这可能会导致交互性不稳定,直到图表完全准备好了)。
长答案:
我假设您的测试数据非常大,因为大多数库可以处理几千个点而不会出现任何可忽略的退化。衡量客户端图表库的性能实际上是一个两方面的问题:渲染时间和可用性。
渲染时间可以通过库将数据集解释为图表的可视化表示的持续时间来衡量。根据每个库的解释算法,您的里程数会因数据大小而异。假设图书馆 X 使用激进的抽样
算法,只需绘制一小部分数据集。性能将非常快,但它可能会或可能不会准确表示您的数据集。更重要的是,更细粒度的交互性可能会受到限制。
这让我想到了性能的可用性和交互性方面。我们使用的是计算机,而不是纸上的图表;它应该尽可能互动。
但是,随着交互量的增加,您的浏览器可能会变慢,具体取决于库的实现。如果您的百万个数据点中的每一个都是一个交互式 dom 节点怎么办? 100 万个数据点肯定会使浏览器崩溃。
大多数图表库以不同方式处理性能、准确性和可用性之间的权衡。至于是什么,全看实现了。
Plug/Source :我是 ZingChart 的一名开发人员,我们一直在与我们的客户打交道,处理大型数据集。我们还构建了与您的测试非常相关的这个:http://www.zingchart.com/demos/zingchart-vs/
作为序言,我对编程还很陌生 Javascript,但我已经使用各种库有一段时间了。我的任务是获取各种图表库的性能指标,以根据一些可用的库(例如 AmCharts、HighCharts、SyncFusion 等)找到最快和最灵活的图表库。我已经尝试过 JSPerf,看起来我正在获取代码执行的性能指标,而不是实际呈现的图表,这是我们想要的指标(也就是用户体验)。我试过在 header 中的 Javascript 代码中使用 performance.now() 并且还环绕显示图表的标签,但是这两种方法都不起作用。
根据渲染获取这些性能指标的最佳方法是什么?
我的方法真的很基础。我用当前时间创建一个 var,然后用我到达代码块末尾的时间和差异调用 console.log()。
var start = +new Date();
//do lots of cool stuff
console.log('Rendered in ' + (new Date() - start) + ' ms');
非常通用,按照包装上的说明进行操作。如果您想测量代码的每个部分,您将不得不创建新的时隙。是的,计算需要时间。但与我想要测量的代码所做的相比,它是微不足道的。 jsFiddle.
中的示例简答:
或者:
- 在图表代码执行之前开始计时,并设置一个 MutationObserver 来观察 DOM 并在所有突变结束时结束时间。
- 查看图表库是否有 done() 事件。 (但要小心,因为这可能不准确,具体取决于 implementation/library。"done()" 可能意味着视觉上完成,但仍在执行后台工作。这可能会导致交互性不稳定,直到图表完全准备好了)。
长答案:
我假设您的测试数据非常大,因为大多数库可以处理几千个点而不会出现任何可忽略的退化。衡量客户端图表库的性能实际上是一个两方面的问题:渲染时间和可用性。 渲染时间可以通过库将数据集解释为图表的可视化表示的持续时间来衡量。根据每个库的解释算法,您的里程数会因数据大小而异。假设图书馆 X 使用激进的抽样 算法,只需绘制一小部分数据集。性能将非常快,但它可能会或可能不会准确表示您的数据集。更重要的是,更细粒度的交互性可能会受到限制。
这让我想到了性能的可用性和交互性方面。我们使用的是计算机,而不是纸上的图表;它应该尽可能互动。 但是,随着交互量的增加,您的浏览器可能会变慢,具体取决于库的实现。如果您的百万个数据点中的每一个都是一个交互式 dom 节点怎么办? 100 万个数据点肯定会使浏览器崩溃。
大多数图表库以不同方式处理性能、准确性和可用性之间的权衡。至于是什么,全看实现了。
Plug/Source :我是 ZingChart 的一名开发人员,我们一直在与我们的客户打交道,处理大型数据集。我们还构建了与您的测试非常相关的这个:http://www.zingchart.com/demos/zingchart-vs/