爲什麼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在移動瀏覽器上滯後頁面？

回答

相關問題