javascript - 为什么 chartjs 在移动浏览器上滞后页面？

我知道移动设备的可用资源较少。这不是我的确切问题。

澄清更多；我在同一台设备上使用了 amCharts 和 chartjs。

AmCharts 有 2 个复杂的图表，其中包含大量数据 - 超过 900 条记录。

Chartjs 带有 1 个图表和非常简单的数据 - 少于 60 条记录。

amCharts 运行流畅，但 chartjs 使页面滚动状态 ，它非常明显滞后，有时将页面的某些部分显示为大约 1/4 秒的空白区域 - 请原谅我的确切数字。

显然，这不是数据集问题，每个库的工作方式存在很大差异。我能找到的最大的一个是 amChart 使用 SVG 而 chartjs 使用 html Canvas 元素。

这种差异真的是问题的根源吗？或者 chartjs 只是没有针对移动设备进行优化？

如果是这样，有什么办法可以克服这个问题吗？

解决方案: 由于问题更多是关于“原因”而不是“修复”，因此我没有将此作为答案提交。

我忘记了，但这几乎是一个重击规则:“如果出现滚动问题；强制 GPU 加速。”大多数现代浏览器都可以做到，而且强制执行非常简单，只需在 3D 空间中进行任何转换(平移、缩放等):

body *:not(svg) {
     transform: translate3d(0, 0, 0);
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0); /*only in IE10*/
}

来源:answers from this question。

使用 ionic 这会破坏导航栏，所以使用 ion-content - 或任何较小的容器 - 而不是 body 。

看起来它会破坏 SVG 因此 *:not(svg) 。

在 ios 8.3 和 android 6 上测试。

最佳答案

如果你的图形是不断变化的，或者当用户滚动时变化 Canvas 会比 SVG 慢。

使用 Canvas ，您正在为每一个小变化重新绘制图形，这是没有办法的。

使用 SVG，您的图形是 DOM 的一部分，无需完全重新渲染即可进行修改。

因此，如果您的图形发生了很大变化，并且您注意到它滞后的时刻与重新绘制时的那些时刻重合，那么库选择 Canvas 而不是 SVG 就是问题所在。否则，在大多数情况下，Canvas 实际上更快。

解决这个问题可能包括寻找另一个库、修改现有库的代码或寻找减少重新绘制图形的方法(例如，在几毫秒甚至几秒的图形更改之间设置强制超时)。

关于javascript - 为什么 chartjs 在移动浏览器上滞后页面？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45566030/