なぜchartjsがモバイルブラウザでページを遅らせるのですか？

Question

私は、携帯電話には余裕がないことを理解しています。これは私の正確な質問ではありません。

もっと明確にするために;同じデバイスにamChartsとchartjsを使用しました。

• AmChartsには、900レコード以上の多数のデータを持つ2つの複雑なチャートがありました。
• Chartjsは1つのチャートと非常に単純なデータで、60レコード未満です。

amChartsスムーズに実行されますが、chartjsは、ページのスクロールSTATERを作る、それは非常に著しく遅れていると、いくつかの倍の約1/4の私の正確な数-excuse秒のためのページとして空白の部分を示しています。

明らかにこれはデータセットの問題ではなく、各ライブラリの仕組みに大きな違いがあります。私が見つけることができる最大のものはamChartがSVGを使用し、chartjsがhtml Canvas要素を使用するということでした。

この違いが本当に問題の根本になるのでしょうか？またはchartjsはモバイル向けに最適化されていませんか？

もしそうなら、これを克服する方法はありますか？

ソリューション：質問は、「修正」よりも「原因」の詳細ですので、私は答えとしてこれを提出しませんでした。

が、私はそれについて忘れてしまったが、tは、ほぼ強打のルールだ：「スクロール問題が発生した場合には、力の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の場合、これはnavbarを破壊するので、の代わりにion-contentまたはより小さなコンテナを使用してください。
• SVGを破るように見えるので、*:not(svg)。
• ios 8.3およびandroid 6で試験した。

Answer 1

グラフを変更すると、ユーザーがスクロールするときにグラフが常に変化したり変更されたりすると、キャンバスがSVGよりも遅くなります。

小さなキャンバスごとにグラフを再描画していますので、キャンバスの周りにはありません。

あなたのグラフは、DOMの一部であり、完全に再描画することなく変更することができます。

グラフが大きく変化していて、再描画されたときにそれらが遅れているときに気付くと、ライブラリの選択はSVG上のキャンバスの問題です。さもなければ、Canvasは実際にはほとんどの場合より高速です。

これを修正するには、既存のコードを変更するか、グラフを再描画する方法を見つけること（たとえば、数ミリ秒または数秒のグラフ変更の間にマンタイムトゥータイムアウトがあるなど）があります。