Prea mulți dezvoltatori web sunt acum în strânsă prindere a tehnologiei. Scris nenumărate lecții și articole pe ea. Aproape toate aceste articole spun că designeri și dezvoltatori de a utiliza sprite CSS pentru a minimiza cereri HTTP și, astfel, a salva kilobytes valoroase. Tehnologia a avansat până în prezent că în prezent au început să folosească mega sprite care conțin una sau două imagini, imagini pentru toate butoanele de pe site.
Este o parte discută despre avantajul de sprite în valoare de ea? Nu toți designerii care sar în mișcare în mașină sprite colorate CSS cu atenție ia în considerare toți factorii? În acest articol vom atinge pe avantajele și dezavantajele sprite-uri CSS. cu accent pe utilizarea de sprite „mega“, și că, în multe cazuri, sprite poate duce la pierderea de timp.
Browserele cache toate imaginile
Un avantaj care este adesea menționată pledează metodelor sprite este o imagine de timp descărcarea (în cazul mega sprite - o imagine). Argumentul lor este că o singură imagine GIF, care conține toate condițiile de imagine ocupă mult mai puțin spațiu decât setul echivalent de imagini individuale separate în fișiere individuale. Este într-adevăr este. GIF imagine unică are doar un singur tabel de culori asociate cu acesta. În timp ce fiecare imagine într-un set divizat are propria tabelă de culoare, adăugând kilobytes. De asemenea, un singur JPEG sau PNG sprite va economisi spațiu pe disc, comparativ cu un set comun de imagini independente. Dar este un câștig semnificativ?
În mod implicit, browser-ul va cache toate imaginile - dacă imaginea este o parte a sprite sau nu. Prin urmare, este sigur că traficul este salvat atunci când se utilizează tehnologia sprite, dar numai în cazul în care este încărcată pagina inițială. Caching se aplică următoarea pagină. care utilizează aceeași adresă URL a imaginii.
Crește timpul necesar pentru a proiecta sprite
Un buton separat este de obicei un element de
- , care are o anumită lățime set. Dacă există o singură sprite, este simplu pentru fiecare buton: lățimea și înălțimea
- Acesta va fi la fel ca lățimea și înălțimea elementelor de listă și link-uri de la sprites aliniate în conformitate cu fiecare stat. Poziția sprite poate fi ușor calculată pe baza înălțimii și / sau lățimea fiecărui buton.
Ce zici de un mega sprite, cum ar fi pe Amazon sau unul dintre cei care utilizează Google. Vă puteți imagina cum să se mențină fișierul și să facă modificări la aceasta pentru anumite poziții? Cum despre crearea cod CSS? Spre deosebire de utilizarea unui simplu buton, care este ușor poziția statului calculat, mega sprite necesită adesea teste extinse și alinierea imaginilor de stat.
Exemplu de cod CSS care este utilizat de Google pentru a alinia sprite.
Faptul că sprite site-ul Amazon păstrează aproximativ 30 de cereri HTTP este adevărat și este cu siguranță o îmbunătățire importantă a performanței. Dar, spre deosebire de valoarea amplificării de dezvoltare și de sprijin, precum și punerea în cache și viteza conexiunilor la Internet încep să fie luate în considerare, decizia de a utiliza sprite în mega format ar putea să nu fie prea favorabil.
Sunt sprite nevoie de sprijin?
Desigur, unele pot părea că sprite nu poate provoca dureri de cap. În multe cazuri, după crearea și utilizarea de sprite sunt rareori editate din nou și nu face parte din gama de probleme de urmărire site-ului. Dacă vă simțiți că sprijinul sprite nu face parte din sarcinile importante. puteți utiliza în condiții de siguranță mega sprite.
Nu totul trebuie făcut de fundal
Un alt motiv pentru a evita utilizarea excesivă a sprite CSS este faptul că acestea pot provoca utilizarea necorespunzătoare de imagini de fundal dezvoltatori. Dezvoltatorii cu experiență, care să ia în considerare disponibilitatea proiectelor lor, să înțeleagă că nu fiecare imagine să fie fundal. Imaginile care conțin componentă importantă a conținutului de a face built-in cod XHTML, și imagini de fundal pentru a decora butoanele și elementele necesare pentru a face fundal.
Amazon pune conținutul imagine ca imagine inline, si in miniatura - ca fundal.
Utilizarea necorespunzătoare a sprite afectează disponibilitatea
Datorită concentrându-se pe utilizarea de sprite-uri CSS, unii dezvoltatori neexperimentați încep să-și asume în mod greșit că toate ar trebui să fie plasat imaginea separată ca fundal pentru a reduce numărul de cereri HTTP, chiar și imaginile care au o semnificație importantă pentru conținutul. Rezultatul este un site mai puțin accesibil, și pot exista restricții privind utilizarea beneficiile potențiale ale titlului atributelor și ALT în HTML.
O cereri HTTP?
Argumentul principal (și foarte bun) este faptul că cea mai importantă parte a îmbunătățirii performanței este de a reduce numărul de cereri HTTP. Unele isssledovaniya arată că 40-60% dintre vizitatorii unui site vin cu o memorie cache gol. Este acest fapt un argument suficient pentru a utiliza mega sprite în toate cazurile? Probabil că da. Mai ales atunci când aveți o importanță mare pentru că este prima vizită de utilizator.
YSlow add-on pentru Firefox arată numărul de cereri depuse.
Cu toate acestea, în timp ce browsere mai vechi vă permite să instalați doar două conexiuni HTTP concurente, Firefox de la versiunea 3.0 și Internet Explorer 8 implicit vă permite să setați 6 conexiuni HTTP simultane. Acest lucru înseamnă că 6 conexiuni simultane la server.
Deci, folosind avantajele sprite CSS pentru statele buton, în rata viitoare de creștere a conexiunilor la Internet și apariția unor noi versiuni de browsere web, care vor fi îmbunătățite pentru a spori productivitatea, beneficiile utilizării mega sprite pot deveni aproape invizibile.
Care este situația cu sprite generatoare CSS?
Un alt argument în favoarea utilizării mega sprite este ușurința vizibilă de creare prin generatoare sprite. analiză detaliată și discutarea acestor instrumente este dincolo de domeniul de aplicare al acestui articol. Dar, în general, se poate spune că asistența le oferă este foarte limitată. și menținerea și susținerea sprite necesită mult timp și resurse, care se opune la beneficiile care decurg din utilizarea acestora.
Generator sprites SpriteMe.
Unele instrumente, cum ar fi Proiectul Fondue. CSS oferă opțiunea de ieșire cod. Instrumentul SpriteMe - alt generator de sprite cu codul de ieșire CSS. SpriteMe convertește imaginile de fundal existente de site-ul web într-un singur sprite (care se face referire la articolul mega sprite), și îl puteți descărca și inserați o pagină cu codul CSS corect. Cu toate acestea, aceste instrumente vă ajută să creați sprite, dar ele nu sunt foarte utile în sprijinul sprite. SpriteMe poate fi, în general inutile atunci când se ocupă cu site-urile pe care pentru a schimba designul imagini de fundal, combinate într-un sprite.
Sprite Generator de proiect Foundue.
Îmbunătățirile sunt realizate în mod continuu, iar noi instrumente disponibile în viitor. Dar, probabil, bazându-se pe argumentele de mai sus, dezvoltatorii se concentreze prea mult efort pentru puțin rezultat?
Este necesar să se concentreze pe alte modalități de a îmbunătăți performanța
După cum sa menționat deja, numărul de cereri HTTP este un factor important în performanța site-ul Web. Dar există o altă modalitate de a reduce numărul acestora, care include o combinație de script-uri și foi de stil, precum și utilizarea de stocare la distanță pentru fișierele de bibliotecă.
Add-on YSlow indică multe alte domenii pentru a îmbunătăți performanța.
În cazul în care un dezvoltator pentru a dedica timp să ia în considerare toți factorii care afectează performanța site-ului, și cu atenție cântărește toate „pro“ și „contra“, este posibil ca acesta merită să renunțe la utilizarea excesivă a sprite și să se concentreze asupra domeniilor de contribuție care vor aduce beneficii mai mari în performanța site-ului.
concluzie
Mulți bloggeri și dezvoltatori de mai mulți ani, a lăudat utilizarea mega Sprites și această opțiune ar trebui să fie luate în considerare în mod serios în dezvoltarea proiectului. Cu toate acestea, nu toate au posibilitatea de a lucra într-un mediu în care site-ul web este suport simplu și direct. Mulți dezvoltatori web sunt de lucru cu codul lor, celălalt - pe proiecte create de altcineva. Trebuie să ne amintim că mega sprite poate provoca mai multe probleme decât bine.
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!