Highcharts DOM阻塞、卡顿

发布于 2022-09-03 14:25:20 字数 539 浏览 13 评论 0

我有一个H5的页面(经常在微信浏览器中使用)调用了 HighCharts 来显示一个K图(其实是HighStock),由于金融方面的数据是经常、快速变化的,在以前采用了每秒钟更新图表、变化数据的方式,后来更换了价格接口,想要做到每秒钟N次变化数据。

按照旧有的逻辑其实已经实现了,但是现在发现一个严重的问题,在每秒钟多次变化数据时,造成DOM阻塞,尤其在微信浏览器中非常严重。我用 console.time 测试了很久,确定是 HighStock 在更新图表时造成的卡顿。

参阅大量资料之后,初步认定卡顿原因为 HighStock 采用 svg 渲染图表。

那么问题来了:

1、HighStock 在每秒钟多次更新的时候造成的卡顿,是否的确是因为 SVG ?
2、如果使用 Canvas 模式的图表,是否会减轻由 DOM 阻塞带来的严重卡顿?
3、如果上面的答案均为是,那么是否有某个参数或者配置,要求 HighStock 使用 Canvas 模式?
4、如果 HighStock 不能使用 Canvas,有没有其他优秀的 Canvas 图表框架推荐?(只用K图)

谢谢。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

辞慾 2022-09-10 14:25:20

应该是你更新的逻辑有问题。

Highstock的性能已经非常优秀了,当然也不是 SVG 的原因,这两者不是性能的瓶颈。

我不清楚你们的具体业务逻辑,如果可以的话,请与我们联系,我们愿意帮你做相关的优化。

联系方式:support@jianshukeji.com

(注:我们是国内做 Highcharts 系列软件技术支持的)

私野 2022-09-10 14:25:20

可以使Canvas 模式的图表,百度出的Echarts图表都是Canvas模式 。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文