Animacje i przejścia CSS3 - czy przeglądarki lepiej radzą sobie z animacją tła graficznego lub elementów DOM?

Question

Pracuję nad aplikacją internetową; jednym z jego wymagań projektowych jest kilka dużych animacji CSS3.

W szczególności - ma duży <div>, który zostanie przeniesiony na cały ekran w odpowiedzi na dane wprowadzone przez użytkownika.

Ze względu na sposób zaprojektowania aplikacji "treść" tej <div> może zostać zaimplementowana jako duża grafika statyczna (np. .jpg lub .png) ustawiona jako tło <div>.

Lub treść może być również zaimplementowana ze standardowym HTML. (Sam układ treści jest "mały" podstępny - wymagałby kilku pływających lub pozycjonowanych zagnieżdżonych elementów div i przęseł, ale nic szalonego.)

Moje pytanie brzmi - która opcja może przynieść najlepsze rezultaty (płynność) animacje?

(Mogę oczywiście to sprawdzić samemu, ale często trudno jest ocenić płynność animacji, szczególnie w kilkunastu różnych przeglądarkach na szerokiej gamie urządzeń, ale zdaję sobie sprawę, że istnieją inne kwestie - np. Konserwacja. ale w tym przypadku, jestem całkowicie skupiony na wykonywaniu animacji.)

Zastanawiam się, czy przeglądarki są generalnie lepiej w animowaniu/renderowania prostych elementów DOM z środowisk graficznych, lub bardziej skomplikowanych elementów DOM (z dużo dzieci) BEZ elementów graficznych?

Również - czy istnieją inne wytyczne? Np.,

• Czy przeglądarki animują niektóre rodzaje elementów graficznych lepiej niż inne? (E.g., .png vs .jpg)
• Czy przeglądarki lepiej ożywiają element, gdy jego elementy podrzędne mają position:absolute, kiedy elementy podrzędne są unoszone lub gdy pozycje elementu potomnego są określane przez regularny obieg dokumentów?
• Czy rzeczy takie jak nieprzezroczystość, cień lub transformacje 3D na zagnieżdżonych elementach mają niekorzystny wpływ na animację elementu nadrzędnego?
• Czy wydajność animacji ulega pogorszeniu w stosunku do złożoności elementu? Np. Czy element z tuzin poziomów zagnieżdżonych animacji elementów DOM jest mniej płynny niż element prosty z tylko węzłem tekstowym?

Mam intuicję na temat tych rzeczy (głęboko zagnieżdżone elementy DOM będą animować mniej płynnie niż prosty element), ale moja intuicja często jest błędna. Zastanawiam się, czy istnieją "reguły" dotyczące mniej więcej pracy przeglądarki.

Co jeszcze powinienem wziąć pod uwagę, gdy duże elementy z dużą ilością elementów podrzędnych są animowane?

Answer 1

Twoje odpowiedzi będą zależeć od konkretnej strategii renderowania używany przez każdego wdrożenia, ale jeśli są OK, z użyciem strategii WebKit jako „ogólnej” strategii następnie wszystkie odpowiedzi znajdują się w tym dokumencie:

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

Najpierw „RenderObject” klon drzewa DOM jest tworzony

Po tym, drzewo jest ruch i każdy RenderObject jest albo przyr orporated do RenderLayer ich najbliższego przodka lub do nowego RenderLayer jeśli jeden z nich jest prawda o RenderObject:

• Jest to obiekt główny na stronie
• Posiada właściwości wyraźna pozycja CSS (względna, bezwzględna lub przekształcić)
• jest przezroczysta
• ma przelew, maskę alfa lub odbicia
• ma filtr CSS
• odpowiada <canvas> elementu, który ma 3D (WebGL) kontekst lub przyspieszonego kontekst 2D
• odpowiada <video> elementu

Następnie, drzewo przepływa i każdy RenderLayer jest albo włączone do GraphicsLayer ich najbliższego przodka lub do nowego GraphicsLayer jeśli jeden z nich jest prawda o RenderLayer:

• warstwa ma perspektywa 3D lub przekształcać właściwości CSS
• warstwa jest używany przez <video> eleme nt stosując przyspieszoną dekodowanie wideo
• warstwa jest używany przez element <canvas> z kontekstu 3D lub przyspieszone kontekst 2D
• Warstwa służy do wtyczki komponowane
• Warstwa używa animacji CSS dla jego nieprzejrzystości lub wykorzystuje animowany WebKit przekształcać
• warstwy zastosowania przyspieszone filtry CSS
• warstwa ma potomka, która jest warstwą compositingu
• warstwa ma rodzeństwa dolnej osi z indeksem, który ma warstwę compositingu (innymi słowy, warstwa staje się w górnej części złożona warstwa)

Więc wiedząc, jak to ogólnie działa i zachowując przeczucie, musiałem najpierw zminimalizować rzeczy, które doprowadziły do ​​stworzenia nowej karty graficznej, a następnie zminimalizować rzeczy, które doprowadziły do ​​stworzenia nowego RenderLayer. Prawdopodobnie możesz uciec z dużą ilością zagnieżdżania węzła DOM lub cokolwiek, o czym mówisz, o ile dodatkowe węzły nie prowadzą do tworzenia nowych RenderLayers lub GraphicsLayers.

Także w związku z twoim pomysłem dotyczącym wysyłania obrazów bitmapowych wektorów elementów DOM zamiast samych wektorów. Naprawdę wątpię, że byłoby szybciej. Po prostu nie ma dla mnie żadnego sensu, aby PNG lub JPEG były jakoś bardziej wydajnym sposobem reprezentowania węzłów DOM niż wektorów.Ale hej, nie zakodowałem Webkita, więc domyślam się, że jedynym sposobem na to, aby go poznać, jest profilowanie go.