Javascript 为什么chartjs滞后于移动浏览器上的页面？

我知道手机的备用资源更少。这不是我的确切问题

进一步澄清；我在同一台设备上使用了

amCharts

和

chartjs

• AmCharts有两个复杂的图表，包含大量数据——超过900条记录
• Chartjs包含1个图表和非常简单的数据-少于60条记录

amCharts

运行平稳，但是chartjs使页面滚动状态变为，它的延迟非常明显，有时页面的某些部分显示为大约1/4秒的空白-请原谅我的确切数字

显然，这不是一个数据集问题，每个库的工作方式有很大差异。我能找到的最大的一个是

amChart

使用SVG，而

chartjs

使用html画布元素

• 这种差异真的是问题的根源吗？或者

  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*/
}

• 来源：
• 使用ionic，这将破坏导航栏，因此使用

  Ionion内容

  -或任何更小的容器，而不是

  主体

• 似乎它会破坏SVG，因此

  *：not（SVG）

• 在ios 8.3和安卓6上测试

---

如果图形是不断变化的，或者用户滚动画布时的变化会比SVG慢

有了画布，你就可以为每一个微小的变化绘制图表，这是不可能的

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

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

---

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

AmCharts对于封闭源代码项目不是免费的，这就是为什么我想在这篇文章中使用

chartjs

。我猜“不断变化”是指我的变化（我不改变它）？即使没有更改，它是否会在每个滚动事件上重新绘制-对不起，我有点困惑。我不知道，我和图书馆本身不太一样。如果滚动时未修改图表，则答案应为“否…”。。。但它依赖于浏览器。例如，如果在画布上移动元素或将画布的一部分移出视图（取决于浏览器实现），则可能会完全重新绘制该元素。