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

Question

前言我是编程Javascript的新手,但我已经和各种库一起工作了一段时间.我的任务是获取各种图表库的性能指标,以便根据一些可用的库(例如AmCharts,HighCharts,SyncFusion等)找到最快和最灵活的.我已经尝试过JSPerf,看起来我正在获得代码执行的性能指标,而不是实际呈现的图表,这是我们想要的指标(也就是用户体验将是什么).我已尝试在标题中的Javascript代码中使用performance.now(),并且还包含显示图表的标记,但这两种方法都不起作用.

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

Answer 1

简答:

要么:

1. 在图表代码执行之前开始计时,并设置MutationObserver观察DOM并结束所有变异结束的时间.
2. 找出图表库是否有一个done()事件.(但要谨慎,因为这可能是不准确的,具体取决于实现/库."done()"可能意味着视觉上完成,但后台工作仍在执行.这可能导致交互性跳跃,直到图表完全准备好).

答案很长:

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

这让我了解了性能的可用性和交互性方面.我们在一张纸上使用的是计算机,而不是图表; 它应尽可能具有互动性.随着交互量的增加,您的浏览器可能会因为库的实现而减速.如果您的每个百万数据点都是交互式dom节点怎么办？1百万个数据点肯定会使浏览器崩溃.

大多数图表库都以不同的方式处理性能,准确性和可用性之间的权衡.至于什么都取决于实施.

插件/来源:我是ZingChart的开发人员,我们一直在为客户提供大型数据集.我们还构建了与您的测试非常相关的内容:http://www.zingchart.com/demos/zingchart-vs/