GoldenLine
Zaloguj się
Jakub Rajchowiak

Jakub Rajchowiak właściciel,
Rajchowiak.com

Temat: nadposywanie styli CSS a wydajnosc

mam zagwostke ktora moze juz kiedys rozwiacal.

Zastanawiam sie czy warto nadpisywac CSSy w jednym stylu czy lepiej przepisywac i nadawac osobne style. Wytlumacze dokladnie o co chodzi.

zalozmy ze mam:

<div class="jeden"></div>

.jeden{
width: 20px;
height: 20px;
backgroind-color: #444444;
}

Teraz tworze nastepna podstrone gdzie mam kolejnego diva ale z innym tlem o tych samych wymiarach:

<div class="dwa"></div>

warto wiec zrobic tak:

.jeden,.dwa{
width: 20px;
height: 20px;
backgroind-color: #444444;
}
.dwa{
backgroind-color: #000000;
}

czy jednak przepisac od nowa:
.dwa{
width: 20px;
height: 20px;
backgroind-color: #000000;
}

Chodzi o to co jest lepsze pod wzgledem szybkosci pracy przegladrki. Wiadomo, ze nie chodzi tylko o dwa style ale ogolne podejscie jesli na przylkad arkusz styli ma ponad 1000 lini.Jakub Rajchowiak edytował(a) ten post dnia 28.03.10 o godzinie 18:40
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Pisze stronke, w ktorym plik ze stylami obecnie ma juz ponad 1300 linii, jak skoncze bedzie mial okolo 2000, strasznie ciezko kontrolowac i nawet starajac sie ladnie pisac kod - mozna sie latwo pogubic.

Staram sie w taki sposob pisac, by niektore elementy wspolne, uzywaly gotowych kilku linii a dopiero potem rozdzielac i pisac ciutke inne dla kazdego.
W paru miejscach zdarza sie, ze style sie nadpisuja i nie widze tego jako blad... przy takiej ilosci kodu jaki mam - nie odnotowalem zadnych opoznien w dzialaniu (po za faktem ze plik stylu ma obecnie ponad 30KB) :)
Co do wielkosci pliku, jak skoncze pisac planuje je potraktowac kompresorem.. z tego co juz przetestowalem, oszczedzam ponad 30% na wielkosci.

Odpowiadajac na twoj przyklad:

.jeden,.dwa{
width: 20px;
height: 20px;
}

.jeden{
backgroind-color: #444444;
}

.dwa{
backgroind-color: #000000;
}

Tak bym to zrobil :)Andrzej Winnicki edytował(a) ten post dnia 28.03.10 o godzinie 19:07
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Ja osobiści bym napisał tak :) zaoszczędziłem zmieściłem się w duch linijkach, ale przy kodzie który ma tyle linijek to tak jak przedmówca użył bym kompresji "CSSTidy"

.jeden,.dwa{width:20px;height:20px;backgroind-color:#444444;}
.dwa{backgroind-color:#000000!important;}
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

to ja jeszcze to skompresuje ...

.jeden,.dwa{width:20px;height:20px; background:#444}
.dwa{background:#000}

important nie jest potrzeby ;)

zawsze też można
http://www.cssoptimiser.com/
http://www.cleancss.com/?lang=en

Jakubie a tak serio... to wszystko zależy ile masz tych styli i czy chcesz je później dynamicznie zmieniać

np. jeśli często używasz jakiegoś koloru jako tła to możesz tworzyć klasy
.bg444 {background:#444}
to samo jeśli są jakieś stale powtarzające się marginesy czy paddingKrzysztof Tomasz J. edytował(a) ten post dnia 28.03.10 o godzinie 21:49
Link do wypowiedziLink
Jakub Rajchowiak

Jakub Rajchowiak właściciel,
Rajchowiak.com

Temat: nadposywanie styli CSS a wydajnosc

obecnie plik ze stylem ma ponad 2400 lini. jest duzy i wlasnie tego sie obawiam. Kompresje w wersji finalnej na 100% zrobie bo juz testoalem i faktycznie 30% zaoszczedzonej wagi pliku.

najgorsze jest ze ciagle dochodza nowe funkcjonalnosci. podstrony wiec i styli przybywa, w takiej ilosci ciezko mi juz pamietac czy uzylem podobnego stylu i obawiam sie ze czesto sie one powtarzaja. Mysle ze poza kompresja przed wypuszczeniem aplikacji bede musial recznie przejrzec i moze czesc poskracac. Choc sie nad tym zastanawiam czy jest sens przy obecnych laczach. Nikt nie zauwazy roznicy czy plik ma 20kB czy 30kB a i tak ciagnie sie go raz.

Zastanawialem sie jednak czy gra jest warta swieczki biorac pod uwage czas jaki potrzebuje przegladarka przy intepretacji takiego duzego pliku styli.Jakub Rajchowiak edytował(a) ten post dnia 29.03.10 o godzinie 17:38
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Scenariuszów postępowania z plikami CSS jest kilka, zależy od projektowanej strony.

1) Mała strona firmowa, blog, zaplecze, etc - 1 plik CSS dla zwykłych przeglądarek + ewentalnie 1 CSS dla IE w komentarzach warunkowych.

2) Duże strony - 1 plik. Po stronie projektowej serwisu możemy utworzyć 1 plik CSS, do którego importujemy kolejne arkusze stylów, typu:

@import url('/css/typography.css');

@import url('/css/layout.css');

@import url('/css/color.css');


Przed publikacją serwisu generujemy 1 plik z wszystkich importowanych, który jest już zopmtymalizowany.

3) Duży serwis - różne sekcje strony. W przypadku różnych podstron wymagane są różne pliki CSS (rzadko kiedy zdarza się, by jedna strona wymagała setek czy tysięcy reguł CSS).

I zależnie od podstrony podłączamy różne style, np.

adres.pl/horoskop/
<link rel="stylesheet" type="text/css" href="/layout.css" />

<link rel="stylesheet" type="text/css" href="/horoskop.css" />


adres.pl/kalendarz/
<link rel="stylesheet" type="text/css" href="/layout.css" />

<link rel="stylesheet" type="text/css" href="/kalendarz.css" />


Zazwyczaj stosuję się do trzeciej metody i nie mam większych problemów ze stylami (być może nie tworzyłem odpowiednio wielkich portali).Kamil Brenk edytował(a) ten post dnia 29.03.10 o godzinie 20:38
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Można jeszcze inaczej


<link rel="stylesheet" type="text/css" href="?compress=styl1,styl2,styl3" media="screen">


Przy użyciu mod_rewrite przerzucamy sobie ?compress=... na konkretny plik, gdzie łączymy pliki w jeden, kompresujemy i zwracamy.
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Wracając do pytania Jakuba, wybrałbym metodę, o której napisał Andrzej. Dobrym nawykiem jest grupowanie wspólnych właściwości, a następnie dodawanie różnych do kolejnych klas. Tym sposobem w jednym miejscu mamy główne właściwości, co pozwoli nam na późniejszą ich zmianę w jednym miejscu. Dodatkowo oszczędzamy na wielkości arkusza. Co do kompresji, to zależy od ilości styli w pliku, przy małych rozmiarach, dla czytelności warto każdą właściwość umieszczać w osobnych liniach, przy większych jednak, ja formatuję je w jednej linii. Ułatwia to późniejsze przeszukiwanie dokumentu, gdyż nazwy klas mamy jedną pod drugą.
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Co do grupowania właściwości, trudno nie zgodzić się z Dariuszem. W końcu arkusze mają być kaskadowe.

Rozwiązanie z grupowaniem nie sprawdza się niestety w przypadku wielu projektów z powodu zupełnie niezwiązanego z własnościami CSS jako technologii a mianowicie... leniwi programiści :) Nierzadko można spotkać kod, gdzie dużą grupę właściwości wpakowano do jednej/kilku klas, która następnie jest wykorzystywana na zasadzie:

- o, mam już prawie taką klasę...
- ... użyję jej i tylko w lokalnym stylu elementu nadpiszę tą jedną rzecz, która się nie zgadza
- ... przecież nie będę pisał kolejnej klasy i pamiętał jej nazwy :)

Być może to raczej offtopic na temat dyscypliny pracy :)

Co do wpływu formatowania na wydajność i/lub objętość arkuszy:

1. Każdy serwer ma możliwość gzipowania wysyłanej treści, co oznacza nawet kilkukrotne zmniejszenie jej objętości przy praktycznie niezauważalnym wzroście obciążenia (dla typowych zastosowań). Zysk jest tu nieporównywalnie większy do zysku oferowanego przez optymalizatory arkuszy.

2. Pakowanie treści na poziomie software serwera WWW będzie z pewnością dużo szybsze i dużo bardziej niezawodne, niż montowanie arkuszy w locie. Oczywiście nie podważam sensu składania kilku arkuszy do jednego a jedynie twierdzę, że nie powinno się realizować jakiejkolwiek kompresji arkuszy na poziomie skryptów.

3. Spotkałem się z (bardzo nielicznymi, ale jednak) przypadkami, kiedy potraktowanie CSS kompresorem działającym na zasadzie optymalizacji powodowało problemy z działaniem arkusza. Optymalizator to tylko algorytm i nigdy nie jest nieomylny.

Żebym nie został źle zrozumiany: nie twierdzę, że bez sensu jest zwracać uwagę na to czy CSS jest optymalny czy nie. Jak najbardziej ma to głęboki sens. Myślę po prostu, że nie jest to sposób na oszczędzenie ruchu czy zwiększenie wydajności.Szymon Komendera edytował(a) ten post dnia 31.03.10 o godzinie 23:03
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

To poglebiajac dalej temat optymalizacji.
Dzisiaj wlasnie napisalem sobie swoj malutki kompresorek, przez ktory przewalam wszystkie CSSy na stronie (bedzie ich cala tona).

W skrocie:
- rewrite mod zostal ustawiony by wszystki sciezki do CSS przekazywac do pliku cssCompressor.php?css=sciezka
- plik php, znajduje na serwie wlasciwy plik
- wczytuje sobie jego zawartosci, wycina komentarze, entery, space (nie pojedyczne), taby i wszystko czego mi nie trzeba
- zwraca header CSS i zwraca tresc css'a po usunieciu zbednych znakow.

efekt:
- 30-40% mniejsze pliki (w moim przypadku 36KB -> 25KB)
- patrze na plik zrodlowy i jest standardowa "rozlazla" wersja wiec mi latwo ja przeczytac, znalezc co trzeba i edytowac.

Swietnie sie to sprawdza, pol dnia roboty i problem z glowy :)

A co do tematu "Być może to raczej offtopic na temat dyscypliny pracy :)" - fakt. Kwestia chyba podejscia, mi osobiscie pasuje takie cos... jesli kojarze ze cos podobnego robilem to dodaje tam to cos nowe, patrze jaki jest efekt i ewentualnie w osobnej klasie dodaje poprawki. Niestety pozniej kod traci na przejzystosci, bo sie okazuje ze jeden styl moze byc w 3 roznych miejsach.

Jak tylko urlop mi sie skonczy, podobny kompresor chce napisac do wszystkich javascriptow, aczkolwiek jest to duuuuzo bardziej zlozony i skomplikowany temat.Andrzej Winnicki edytował(a) ten post dnia 31.03.10 o godzinie 23:03
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Czy bierzesz pod uwagę, że ta metoda:

- spowoduje bardzo poważny wzrost zapotrzebowania serwera na RAM i moc obliczeniową
- spowoduje ograniczenie funkcjonalności pamięci podręcznej systemu plików co wpływa ujemnie na prędkość serwowania CSS

?

Czy kompresujesz CSS przed wysłaniem? Mówimy tu o 30% oszczędności kosztem sporych zasobów systemowych i wydajności po stronie systemu, podczas gdy zwykłe włączenie gzipa powoduje spadek rzędu 80-90% prawie bez kosztów.
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

W moim przypadku nie musze sie przejmowac wydajnoscia serwera, bo wszystko jest cachowane i dopoki cache nie zostanie wyczysczony - request nie dojdzie do glownego webservera.

"poważny wzrost zapotrzebowania serwera na RAM i moc obliczeniową" - bardzo wazne pytanie - co znaczy "powazny" ;)
W sumie nie stanowi to wiekszego problemu by zmierzyc, co pewnie jutro uczynie.
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Masz w takim razie dość wygodnie :) W takim razie odczepiam się od tej kwesti skoro jest już załatwiona.

"poważny wzrost zapotrzebowania serwera na RAM i moc obliczeniową"

To ściśle zależy od konfiguracji serwera. Skoro masz na swojej platformie dostępne zaawansowane mechanizmy decydujące o zasadach serwowania treści to prawdopodobnie zadbano również o to by serwer WWW (software) nie był zbyt ociężały.

Aby nie pozostawić odpowiedzi bez przykładu ogólnego, na 95% platform rozpatrywane zdarzenie będzie wyglądało tak:

1. CSS idzie via PHP
- przychodzi request na skrypt PHP (w uproszczeniu)
- serwer ładuje cholera wie ile modułów (na typowym Apache z mpm-prefork daje to nawet do kilkudziesięciu MB pamięci) i obsługuje request
- dostajemy CSS gzipowany lub nie

Taka metoda (zakładając, że nie mamy pod ręką bajerów takich jak Ty masz :)) zawsze jest wielokrotnie wolniejsza, niż zaserwowanie pliku prosto z cache systemu lub ostatecznie z dysku.

Nie mam jednak pojęcia o architekturze platformy, którą wykorzystujesz dlatego nie zamierzam tu "nawracać". Miałem na celu jedynie zwrócić uwagę na pewne ogólne kwestie ponieważ ludzie często realizują rzeczy proste w sposób niezwykle skomplikowany i powolny.Szymon Komendera edytował(a) ten post dnia 31.03.10 o godzinie 23:50
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Andrzej Winnicki:
To poglebiajac dalej temat optymalizacji.
Dzisiaj wlasnie napisalem sobie swoj malutki kompresorek, przez ktory przewalam wszystkie CSSy na stronie (bedzie ich cala tona).

W skrocie:
- rewrite mod zostal ustawiony by wszystki sciezki do CSS przekazywac do pliku cssCompressor.php?css=sciezka
- plik php, znajduje na serwie wlasciwy plik
- wczytuje sobie jego zawartosci, wycina komentarze, entery, space (nie pojedyczne), taby i wszystko czego mi nie trzeba
- zwraca header CSS i zwraca tresc css'a po usunieciu zbednych znakow.

Niech jeszcze łączy poszczególne css'y w jeden plik, włącz gzipa, może jeszcze jakiegoś cache i będzie jeszcze fajniej.
Jak tylko urlop mi sie skonczy, podobny kompresor chce napisac do wszystkich javascriptow, aczkolwiek jest to duuuuzo bardziej zlozony i skomplikowany temat.

Nie jest, sprawdzone w praktyce.
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Michał Wachowski:
Jak tylko urlop mi sie skonczy, podobny kompresor chce napisac do wszystkich javascriptow, aczkolwiek jest to duuuuzo bardziej zlozony i skomplikowany temat.

Nie jest, sprawdzone w praktyce.
Bywa bardziej złożony, zależy od funkcjonalności. Często w kompresorach JavaScript stosuje się skracanie zmiennych do krótszej postaci, np.

var cena_netto = 1.32;

var cena_brutto = (cena_netto * .22) / 100;

po kompresji wygląda:
var a1 = 1.32;

var a2 = (a1 * .22) / 100;


Jeśli jednak mamy konstrukcję z użyciem eval czy innych dynamicznych funckji to skrypt się wysypie, chyba że dokładnie analizuje treść i logikę skryptów.

To samo przy wywalaniu znaków nowej linii:
var cena_netto = 1.32

var cena_brutto = (cena_netto * .22) / 100

po kompresji wywali błąd:
var a1 = 1.32 var a2 = (a1 * .22) / 100


:-)
Link do wypowiedziLink

konto usunięte

Temat: nadposywanie styli CSS a wydajnosc

Nie mówiłem o jakichś dziwnych kompresorach JS.
Najlepiej gzipować i problem z głowy - pliki tekstowe pięknie się kompresują.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj