Question

据我所知，手机资源较少。这不是我的确切问题。

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

AmCharts有2个复杂的图表，包含大量数据 - 超过900条记录。
Chartjs有1个图表和非常简单的数据 - 无记录。

amCharts运行顺利，但 chartjs使页面滚动停止，它非常明显滞后，有时会将页面的某些部分显示为空白空间大约1/4秒 - 原谅我的确切数字。

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

这种差异真的可以成为问题的根源吗？或者chartjs还没有针对移动设备进行优化？
如果是这样，有没有办法克服这个问题？

解决方案：因为问题更多的是关于＆＃34;原因＆＃34;而不是＆＃34;修复＆＃34;，我没有提交这个作为答案。

我忘记了它，但几乎是一个重击规则：＆＃34; 如果出现滚动问题;强制GPU加速。＆＃34;大多数现代浏览器都可以做到这一点，强迫它非常简单，只需在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。
使用离子会破坏导航栏，因此请使用ion-content - 或任何较小的容器 - 而不是body。
因为它似乎会破坏SVG *:not(svg)。
在ios 8.3和android 6。

Answer 1

如果用户滚动画布时图形会不断变化或更改，则会比SVG慢。

使用画布，您可以针对每一个小小的变化重新绘制图形，但不能解决它。

使用SVG，您的图形是DOM的一部分，可以在不完全重新渲染的情况下进行修改。

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

修复此问题可能包括找到另一个库，修改现有代码的代码或找到更少绘制图形的方法（例如，在图形更改几毫秒甚至几秒之间有一个mandatroy超时）。

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

1 个答案: