Płaszczyzna HTML5: lepiej rysować ponownie obiekty lub używać bitmap?

Question

Mój projekt ma płótno HTML5, na którym wielokrotnie rysowane są obiekty graficzne. Te obiekty zmieniają się szybko. Rysowanie ich wymaga czasu. Jak mogę to przyspieszyć?

Obiekty nie są zbyt złożone, ale zawierają elementy takie jak łuki, gradienty, wielokąty.

Wygląd obiektu zależy od około 10 właściwości, z których każda ma jedną z około 10 wartości. Oznacza to, że istnieje tylko około 100 różnych wyglądów niż obiekt może mieć. Dlatego myślę tylko o rysowaniu każdego wyglądu raz, a następnie buforowaniu mapy bitowej do ponownego użycia.

Wszystko musi działać na kliencie (czyli nie można korzystać z gotowych obrazów)

1. Jaki byłby najlepszy sposób to zrobić z HTML5 Canvas?
2. Czy w ogóle jest to dobry pomysł lub czy praca z bitmapami jest większa niż ponowne rysowanie obiektów za każdym razem?

Answer 1

Pamięć podręczna pamięci podręcznej pamięci podręcznej! Sprawdź this article by Simon Sarris i my own findings. Zasadniczo robisz płótno w pamięci, skopiuj tam zawartość i możesz je ponownie wykorzystać. Zobaczysz w ten sposób ogromny wzrost wydajności.

Rotating sprites without caching

Rotating sprites WITH caching (iść w górę, aby znaleźć zombie)

powinna pojawić się dość dużą poprawę w 2. przykładu.

EDIT

jsfiddle example cached

jsfiddle example not cached

Simon pisał to w komentarzach, co powinno naprawdę jasne rzeczy w górę, jeśli nie można zobaczyć wzrost wydajności po prostu patrząc na pokazy.

JSperf findings by Simon Sarris

Answer 2

W zależności od tego, ile obiektów może zmienić się w sekundę, a w konsekwencji ile obiektów trzeba przerysować i jak - w tej samej sekundzie, odświeżanie ponad buforowania może być dość opcja.

Ogólnie sugeruję rozważenie następującej ścieżki decyzyjnej.

Wspomniał Pan, że może istnieć 100 różnych sposobów wyświetlania jednego z obiektów.

Można to uznać za podobne do minimum 99^2 teoretycznie możliwych przejść dla każdego z obiektów.

Czy te zmiany statusu są dramatyczne pod względem kształtu/rozmiaru/koloru, ale nadal są dobrze zidentyfikowane, oznaczone i możliwe do zarządzania? Jeśli tak, buforowanie tylko raz 100 różnych wyglądów, które będą używane przez wszystkie obiekty, może znacznie poprawić wydajność.

I odwrotnie, jeśli - na przykład - tło prawie się nie zmienia, a narysowana część zajmuje mniej istotną część obszaru obiektu, można poważnie rozważyć przerysowanie jej za każdym razem.

W rzeczywistości wstępnie wyrenderowany obraz nie pasuje do twoich potrzeb w zakresie wydajności, jeśli narysowany obiekt zmienia się dynamicznie, a zwłaszcza w sposób ciągły, ponieważ wstępnie renderowany obraz musi być rysowany całkowicie przy każdym przejściu stanu podczas przerysowywania obiekt może oznaczać mniejsze obciążenie obliczeniowe.