Niektóre urządzenia z Androidem są bardzo powolne podczas renderowania elementów canvas

Question

Zajmuję się tworzeniem aplikacji na urządzenia z Androidem i stwierdziłem, że Samsung Galaxy S4 ma wyjątkowo słabą wydajność, gdy aplikacja/strona internetowa używa płótna. Dziwne jest to, że nie zawsze tak jest.

Przetestowałem 2 przykładowe aplikacje.

http://ie.microsoft.com/testdrive/Performance/FishIETank/Default.html

i

http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Default.html

pierwszy działa dobrze, a wyprzedza My Nokia (który jest dual core) i jest oczekiwany. Jednak druga wersja demonstracyjna prawie całkowicie przestaje reagować, a liczba klatek na sekundę jest bliska 1, gdzie wszystkie inne urządzenia sprawiają, że wszystko jest w porządku.

Ponieważ pierwsza aplikacja działa dobrze, a druga nie działa, to rodzi pytanie, dlaczego? Pierwsza nie ma żadnych detektorów zdarzeń, gdzie tak jak druga osoba ma słuchaczy dotykowych. Czy touchmove może być przyczyną zamiast płótna ... czy jest to demo używające niektórych funkcji płótna, a drugie nie jest, a zatem ma słabą wydajność.

Przeczytałem wiele tematów na ten temat i żaden nie wydaje się mieć odpowiedzi. Większość ma wiele miesięcy ... więc pomyślałem, że źle zrobię nowy temat.

Czy istnieje sposób na rozwiązanie problemu z płótnem na Samsung S4 ... i potencjalnie na innych urządzeniach z systemem Android w wersji 4.2.x. Jeśli jakikolwiek użytkownik StackOverflow ma tutaj S4, czy możesz przetestować oba dema i potwierdzić moje obserwacje?

Answer 1

Podejrzewam, że nie jest to problem specyficzny dla Canvas, ale numer requestAnimationFrame. Pierwsza animacja nie próbuje użyć requestAnimationFrame, ale druga ma w this file na line 206.

Android Przeglądarka na firmware < = 4,2 nie obsługujerequestAnimationFrame, a zamiast tego wykorzystuje setTimeout dzieląc sekundę przez określoną szybkością ramki w Hz, co sprawia, wykonuje się w zwykły pętli zdarzeń.

setTimeout nie wykonuje się w dokładnie określonym czasie w milisekundach, ale powoduje zapis zdarzenia w pętli w określonym czasie. Jeśli pętla zdarzeń jest zawieszona przez inne javascript na stronie lub jedno-rdzeniowe urządzenie decyduje o czymś innym jest ważniejsze, środowisko wykonawcze jest podatne na de-priorytetyzację very bez interfejsu API requestAnimationFrame, a wywołania zwrotne zapisane przy użyciu setTimeout będą się zacinać i grono. More on setTimeout resolution and timing.

Niestety, jesteś na łasce kolejki zdarzeń, jeśli używasz tego (1) podejścia opartego na systemie Canvas i (2) na platformie, która nie obsługuje requestAnimationFrame. Here is the reference table, dla których przeglądarek obsługują tę funkcję.

Pozdrawiam!