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

我知道手机有足够的资源可供使用。这不是我确切的问题。为什么chartjs在移动浏览器上滞后页面？

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

AmCharts有2个复杂的图表，有很多数据 - 超过900条记录。
Chartjs带有1个图表和非常简单的数据 - 比60条记录更少。

amCharts流畅运行，但chartjs使得页面滚动斯塔特，它落后于非常明显，有些时候显示页面空白的部分为第二-excuse我确切的数字的1/4左右。

显然，这不是一个数据集的问题，还有如何在每个库的作品有很大的不同。我能找到的最大的一个是amChart使用SVG，而chartjs使用html Canvas元素。

这种差异真的能成为问题的根源吗？或者是chartjs只是未针对移动设备进行优化？
如果是这样，是否有任何方法可以克服这一点？

解决方案：由于问题更多的是“事业”而不是“修复”，我没有提出这个作为一个答案。我们已经忘了它，但几乎是一个重要的规则：“在滚动问题的情况下，强制GPU加速。”大多数现代浏览器都可以这样做，并且它非常简单，强制执行任何转换，刻度等），在三维空间中：

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。

来源

2017-08-08 Zahema

AmCharts是不是免费的封闭源代码的项目，这就是为什么我要在这其中使用'chartjs'。 – Zahema

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

用帆布您要重新绘制图形的每一个变化不大，有没有办法解决它。

随着SVG你的图是DOM的一部分，而不完全重新绘制它进行修改。

所以，如果你图是改变了很多，你注意到的时刻，当它落后于那些一致，当它被重新绘制画布上的SVG库选择的问题。否则，Canvas在大多数情况下实际上更快。修复这可能包括找到另一个库，修改现有代码的代码或寻找减少重新绘制图表的方法（例如，在几毫秒甚至几秒的图形更改之间有一个mandatroy超时）。

来源

2017-08-08 11:04:13 George

我想通过“不断变化”你的意思是我的变化（我不改变的话）？即使没有变化，是否会重新绘制每个滚动事件？ - 我很困惑。 – Zahema

我不知道，我unfamilair与库本身。如果滚动时没有修改图形，答案应该是NO ......但它依赖于浏览器。例如，如果你移动一个元素在画布或移动画布的一部分出的取决于浏览器的实现可以完全重新绘制视图。 – George

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

回答

相关问题