CSS3 - Jakie są najlepsze praktyki dotyczące wydajności?

Question

W ubiegłym roku spędziłem dużo czasu czytając o wydajności javascript, wąskich gardłach i najlepszych praktykach. W moim najnowszym projekcie używam CSS3 z fallbacks do javascript/jquery dla podstawowych animacji i efektów, takich jak unosi się i jestem zainteresowany eksperymentowaniem z CSS3.

Czy występują problemy z wydajnością CSS3?

Jeśli tak, jakie są najlepsze praktyki?

Na przykład czy transition: all 150ms ease-out; zużywa więcej pamięci niż transition: opacity 150ms ease-out, background-color 150ms ease-out;?

[proszę nie tylko odpowiedzieć na moim przykładzie pytanie!]

Answer 1

Aby sprawdzić, czy na zewnątrz, trzeba by dokonać animacja zdarzyć 500 lub 1000 razy i godzina.

Animacje na płótnie i HTML5 o wiele bardziej procesor niż flash. Flash na iPhone przewyższa możliwości HTML5. Zrobiłbym moje animacje, audio i wideo za pomocą JQuery jako HTML5 zamienia elastyczność dla wygody.

Answer 2

O tak! Jeśli lubisz majsterkować wydajnością - będziesz zadowolony, że jest dużo problemów z wydajnością w CSS3.

1. Odświeżanie i ponowne wlewanie. Jest dość łatwy do spowodowania niepotrzebnych powtórzeń i ponownych zmian, a tym samym opóźnienia całej strony. Przeczytaj: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ Ekstremalny przykład: http://files.myopera.com/c69/blog/lag-me.html
2. Przewiń i najedź kursorem. Podczas przewijania lub najechania przeglądarka musi renderować nową zawartość. Webkit jest tutaj sprytny, ponieważ buforuje strony jako obrazy statyczne, więc NIE wyświetla strony podczas przewijania. Ale - MOŻESZ pominąć tę optymalizację, używając takich rzeczy jak przezroczyste tło w bloku, który przewijasz, dodając obrót po najechaniu kursorem, dodając z lepszymi nagłówkami/stopkami position:fixed itd. - efekt będzie nieostrożny w różnych przeglądarkach, Opera wydaje się być najbardziej dotknięta .
3. Box-shadow jest zły. Cienie boxów mają różną jakość renderowania w różnych przeglądarkach (niska w Webkit, wysoka w Operze/IE9, różni się w różnych wersjach Firefoksa) - a zatem ich wpływ na wydajność jest różny w różnych przeglądarkach - jeszcze, inset cienie w pudełku i cienie w pudełku z dużym promieniem rozsunięcia może powodować obserwowalne zawieszanie się na przerysowanie w dowolnej przeglądarce.
4. Płaszczyzny, stoły i ich przyjaciele są źli. Z początku brzmi dziwnie, ale przeczytaj ten artykuł (w języku rosyjskim) - http://chikuyonok.ru/2010/11/optimization-story/ - może to uratować ci trochę włosów na głowie. Głównym pomysłem jest - dzieci pływających elementów powodują zmiany łańcucha w trakcie modyfikacji.
5. Promień brzegu jest bardzo drogi, nawet droższy od gradientów. Nie wpływa na układ, ale wpływa na odświeżanie. http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
6. Gradienty opóźnione. Gradienty CSS są bardzo fajnym nowym narzędziem, jestem ich wielkim fanem. Jednak tylko kilka testów pokazało, że nie powinieneś ich używać, jeśli planujesz mieć wiele elementów z gradientem i wymagają one responsywnego interfejsu :(Istnieje jednak obejście/hack, - używanie płótna do renderowania obrazów gradientowych i zestawu ich jako tło za pośrednictwem adresu danych.
7. Przejrzystość jest droga. Jeśli masz kilka ruchomych elementów, które krzyżują się ze sobą i są półprzezroczyste (nieprzezroczystość < 0, kolor rgba, png, zaokrąglone rogi (!)) - oczekuj opóźnienia. Często można tego dokonać, ograniczając liczbę przezroczystych elementów, które mogą się nakładać.
8. Przejścia są lepsze niż JS, ale ... Firefox nie może prawidłowo renderować przejść, jeśli zastosuje się je do ponad 150 elementów jednocześnie. Opera nie może zastosować przejść przed i po. IE9 w ogóle ich nie obsługuje. Przetestuj przed użyciem, ale ogólnie - są one szybsze niż analogi JS (jQuery.animate).
9. Uważaj na obciążenie procesora. Jego trudna do zmierzenia przeglądarka wykorzystująca pamięć, (ale można to zrobić w chrome i interpolować wyniki, z odrobiną soli), ale jest łatwa w obserwacji użycia procesora (przez Process Explorer lub narzędzia systemowe). Spikes pokazuje miejsca, w których potrzebujesz swojej uwagi.
10. Stare przeglądarki są stare. Nie próbuj modernizować IE6, Firefox 2, Safari 3. Te przeglądarki nigdy nie powinny obsługiwać nowych, fajnych rzeczy. Zostaw ich w spokoju. Po prostu wyświetlaj podstawowe treści za pomocą podstawowych stylów. Pozostali użytkownicy IE6 będą wdzięczni za to.

Answer 3

Paul Irish on CSS3 performance