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. |
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...
|
Citat:
|
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 {...} Kôd:
#top_blue_nav {...} U svakom slučaju ako još neko ima neko mišljenje iz svog iskustva voleo bih da čujem. Pozdrav! |
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...
|
Č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: |
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. |
@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 :)
|
Blago onome kome je CSS optimizacija jedini problem :)
|
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 01:44. |
Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.