Uruchomiłem kilka liczb na drawi w formacie HTML ng versus Rysunek na płótnie. Mógłbym napisać ogromny post na temat zalet każdego z nich, ale podam niektóre z istotnych wyników moich testów, które rozważę dla twojego konkretnego zastosowania:
Wykonałem strony testowe Canvas i HTML, oba miały ruchome "węzły". Węzły Canvas to obiekty, które utworzyłem i śledzone w JavaScript. Węzły HTML były <div> s, chociaż mogły również być <image> lub <video>.
Do każdego z dwóch testów dodałem 100 000 węzłów. Zrobili zupełnie inaczej:
Zakładka testu HTML trwała wiecznie, aby załadować (czas nieco ponad 5 minut, chrome poprosiło o zabicie strony za pierwszym razem). Menedżer zadań Chrome twierdzi, że karta zajmuje 168 MB. Zajmuje to 12-13% czasu procesora, gdy patrzę na niego, 0%, gdy nie patrzę.
Zakładka Canvas wczytuje się w ciągu jednej sekundy i zajmuje 30 MB. Zajmuje to również 13% czasu procesora przez cały czas, niezależnie od tego, czy ktoś na niego patrzy.
Przeciąganie strony HTML przebiega gładko, co prawdopodobnie jest oczekiwane, ponieważ obecna konfiguracja polega na przerysowaniu WSZYSTKIEGO co 30 milisekund w teście Canvas. Istnieje wiele optymalizacji, które można zastosować do Canvas. (unieważnienie płótna jest najłatwiejsze, także wycinanie regionów, selektywne przerysowywanie itp.zależy tylko od tego, jak bardzo chcesz implementować)
Wideo na stronie HTML, podczas gdy ja nie poruszam obiektów, jest w rzeczywistości idealnie gładkie.
Na płótnie wideo jest zawsze wolne, ponieważ stale przerysowuję, ponieważ wyłączyłem unieważnianie rysunku. Istnieje oczywiście wiele możliwości poprawy.
Samo rysowanie/ładowanie to daleko szybciej na płótnie i ma o wiele więcej miejsca na optymalizacje (np. Wykluczanie rzeczy poza ekranem jest bardzo łatwe).
Czy masz wersję demo, którą możesz podać jako przykład? – Steropes