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

Question

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

澄清更多；我在同一台设备上使用了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 上测试。

Answer 1

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

使用画布，您会为每一个微小的变化重新绘制图表，这是没有办法的。

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

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

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