DevProTalk

DevProTalk (http://www.devprotalk.com/index.php)
-   (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)
-   -   Optimizacija renderovanja CSS-a i gotovi CSS frejmvorci (http://www.devprotalk.com/showthread.php?t=10353)

kwisko 08. 09. 2011. 20:15

Optimizacija renderovanja CSS-a i gotovi CSS frejmvorci
 
Pozdrav svima.

Već duže vreme se igram sa nekim gotovim css frejmvorcima (css frameworks :)) i ono što sam primetio jeste da oni baš i ne "brinu" za brzinu renderovanja CSS stilova u browseru - ukoliko se osvrnem na ovaj Googleov članak.

Po tom uputstvu sugeriše se korišćenje klasa kada god zatreba (.page-title, .submenu) umesto korišćenja ugnježdenih stilova i tagova (.main_content h1 {...}, menu ul li {...}). Razlog za to je taj da, ukoliko se koriste ugnježdene varijante, browser da bi primenio stilove mora pronaći baš tu kombinaciju koja je navedena u css-u, što oduzima određeno vreme.

Sa druge strane, nekom ko radi frontend je znatno lakše da ne dodaje novu klasu za svaki bitniji deo, jer mnogo stvari može postići ugnježdavanjem tagova ili klasa.

Kakva su Vaša iskustva po tom pitanju? Da li poštujete smernice iz Googleovog uputstva ili ne, i u kojoj meri?

Generalno, ima dosta smisla to što piše, ali me interesuje kako se to pokazalo u praksi, pogotovu kod onih koji imaju veći broj projekata za sobom.

ivanhoe 08. 09. 2011. 21:11

to ti je tipicna preuranjena optimizacija... brzina renderovanja CSS-a je potpuno zanemarljiva za 99.99% stranica, kad se uporedi sa brzinom ucitavanja strane, css i js fajlova, slika, parsiranjem js-a i svim ostalim... s druge strane "ugnjezdena" struktura ti obicno znacajno smanji velicinu css fajla, i olaksava izmene i odrzavanje, sto je po meni mnogo bitnije...

noviKorisnik 09. 09. 2011. 00:40

Citat:

Use class selectors instead of descendant selectors.
For example, if you need two different styles for an ordered list item and an ordered list item, instead of using two rules:
Kôd:

    ul li {color: blue;}
    ol li {color: red;}

You could encode the styles into two class names and use those in your rules; e.g:
Kôd:

    .unordered-list-item {color: blue;}
    .ordered-list-item {color: red;}

If you must use descendant selectors, prefer child selectors, which at least only require evaluation of one additional node, not all the intermediate nodes up to an ancestor.
Primer preporuke kaže da svaki list item u html-u moraš da nakitiš odgovarajućom klasom ili nećeš imati prikaz koji bi inače želeo da ostvariš pravilima koja proglašavaju za neefikasna. (???)

kwisko 09. 09. 2011. 01:55

Hvala obojici na odgovorima... generalno već dosta dugo koristim "ugnježdene" css stilove iz istih razloga koje je i @ivanhoe naveo (održavanje stilova i sve ostalo), nego sam nedavno našao na ovo pa pošto radim nešto drugačije od "preporučenog" zainteresovao me je da čujem mišljenje drugih ljudi.

Generalno, neke stvari koje su u tom članku navedene mi baš nemaju mnogo smisla (primer koji je @noviKorisnik naveo), mada su mi neki primeri sasvim ok.
Na primer ne koristiti tagove i #id-jeve zajedno kao ovde:
Kôd:

ul#top_blue_nav {...}
form#UserLogin {...}

već da je dovoljno samo ovo
Kôd:

#top_blue_nav {...}
#UserLogin {...}

#id bi ionako trebao biti jedinstven na stranici.

U svakom slučaju ako još neko ima neko mišljenje iz svog iskustva voleo bih da čujem.

Pozdrav!

ivanhoe 09. 09. 2011. 02:34

potrazi po netu, Stabornella (iz Facebooka) je cini mi se pisala oko efikasnosti renderovanja CSS-a... recimo #bla .bla se u svim browserima prikazivalo sporije nego samo .bla, sto na prvi pogled nema nikakve logike, ali eto, tako je valjda programiran css engine.. u svakom slucaju ako te zanima ta tema super je text...

Milos Vukotic 09. 09. 2011. 09:43

Čitah malo Staborneline tekstove, http://www.stubbornella.org/content/...eral/geek/css/

Možda me s godinama izdaje strpljenje, ali baš me nekako podsjeti na ovo:


kwisko 09. 09. 2011. 13:48

Hvala @ivanhoe na sugestiji za Stubbornell - pogledao sam par klipova na brzinu i deluje mi prilično korisno i intersantno.

Generalno, ona radi na "projektu" OOP CSS tako da se njena priča manje-više svodi na organizaciju i optimizaciju CSS-a za ponovno korišćenje, ali uz poštovanje nekih osnovnih pravila koje se u Googleovom dokumentu navode. U jednom od članaka je navela da je čak i Facebook imao dosta reduntandnih stilova i da je prilikom jednog redizajna smanjio broj heading stilova sa 850+ na samo 25, što je prilično velika razlika.

Inače i na Bootstrap Google Groups sam otvorio temu pa ako nekoga interesuje može pratiti. Kao što reče Mark Otto u toj poruci - verovatno je najbolji neki "balanced mix" - i da bude pogodan za održavanje i da ne bude nešto posebno "težak" za renderovanje.

Cenim da se razlika u brzini renderovanja meri milisekundama i da u većini slučajeva i nije zapaženo primetna - sigurno je primetnija razlika u učitavanju kompresovanog i nekopresovanog css-a, nego u renderovanju.

ivanhoe 09. 09. 2011. 17:48

@Milosh: a jbga, ona je CSS Evangelista, od toga zivi, a kad CSS-u oduzmes sve bagove ne ostane ti bas puno toga o cemu mozes da diskutujes na konferencijama :)

webarto 09. 09. 2011. 17:56

Blago onome kome je CSS optimizacija jedini problem :)

kwisko 27. 09. 2011. 15:01

Još jedan korista resurs
 
Evo još jednog korisnog resursa - http://smacss.com/book/. Više se tiče neke organizacije CSS-a ali se prožimaju i principi navedeni u OOCSS i drugim praktičnim sugestijama za brže renderovanje stilova.

Hvala još jednom svima na odgovorima i resursima - pronašao sam par interesantnih stvari da malo unapredim svoj CSS ;)


Vreme je GMT +2. Trenutno vreme je 13:43.

Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.

Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.