Autorka: Lindsey Simon, UX Developer
Zalecana wiedza: podstawowy kod HTML, podstawowy JavaScript, praktyczna znajomość języka CSS
Przeformatowanie to nazwa procesu przeglądarki służącego do ponownego obliczania pozycji i geometrii elementów w dokumencie w celu ponownego wyrenderowania części lub całości dokumentu. Przeformatowanie to operacja blokująca użytkowników w przeglądarce, dlatego pomaga deweloperom zrozumieć, jak skrócić czas przeformatowania, a także zrozumieć wpływ różnych właściwości dokumentu (głębokość DOM, wydajność reguł CSS, różne rodzaje zmian stylu) na czas przeformatowania. Czasami zmiana układu elementów w dokumencie może wymagać zmiany układu jego elementów nadrzędnych oraz wszystkich następujących po nim elementów.
Istnieje wiele różnych działań użytkownika i możliwe zmiany w DHTML, które mogą wywołać przeformatowanie. Przeformatowanie może spowodować zmianę rozmiaru okna przeglądarki, użycie metod JavaScriptu obejmujących obliczone style, dodanie lub usunięcie elementów z DOM. Warto też zauważyć, że niektóre operacje mogą powodować dłuższe przeformatowanie, niż mogłoby się wydawać. Przeanalizujmy ten schemat z wypowiedzi Steve'a Soudersa „Even Accelerated Web Sites” (Równomiernie szybsze witryny internetowe):
Z tabeli powyżej widać, że nie wszystkie zmiany stylu w języku JavaScript powodują przeformatowanie we wszystkich przeglądarkach, a czas potrzebny na przeformatowanie jest inny. Widać też, że nowoczesne przeglądarki sprawdzają się w czasach zmian przepływu tekstu.
W Google testujemy szybkość naszych stron i aplikacji na wiele sposobów. Przeformatowanie danych jest kluczowym czynnikiem, który uwzględniamy podczas dodawania funkcji do interfejsu. Staramy się, aby nasze usługi były atrakcyjne, interaktywne i atrakcyjne dla użytkowników.
Wytyczne
Oto kilka prostych wskazówek, które pomogą Ci zminimalizować przeformatowanie stron internetowych:
- Zmniejsz niepotrzebną głębię DOM. Zmiany na jednym poziomie drzewa DOM mogą powodować zmiany na każdym poziomie drzewa – aż do poziomu głównego i do elementów podrzędnych zmodyfikowanego węzła. Skraca to czas poświęcany na przeformatowanie.
- Zminimalizuj reguły CSS i usuń nieużywane reguły CSS.
- Jeśli wprowadzasz złożone zmiany w renderowaniu, np. animacje, rób to poza procesem. Użyj do tego celu pozycji bezwzględnej lub stałej.
- Unikaj niepotrzebnych skomplikowanych selektorów CSS (zwłaszcza selektorów podrzędnych), które wymagają większej mocy procesora do dopasowywania.
W tym filmie Lindsey wyjaśnia kilka prostych sposobów na ograniczenie przeformatowania strony:
Dodatkowe zasoby
- Zmiany i przeformatowanie w Operze
- Prezentacje funkcji debugowania w Firefoksie Satoshiego Ueyama:
- Nicole Sullivan o przeformatowaniu i odnowieniach
Prześlij opinię
Czy ta strona była pomocna?