HTML- unire și css-fișiere, proiecte mod creativ
Numărul de cereri este cea mai gâtuire la încărcarea paginii. Conform unor cercetări recente aproximativ 40% din timp descărcarea ia doar pe crearea de noi conexiuni la server. În această lumină, orice metode pentru a reduce numărul de interogări care arată foarte promițătoare. Cu toate acestea, fiecare astfel de metodă, pornind de la o simplă combinație de stiluri și script-uri și se termină cu date: URI, este destul de complicat din punct de vedere tehnologic, astfel încât, în unele cazuri nu poate pur și simplu să plătească pentru timpul petrecut.
Cookie adesea expuse la întregul domeniu, sau chiar pe toate subdomeniile, ceea ce înseamnă să le trimit în browser chiar și atunci când se solicită fiecare imagine cu domeniul. Ca urmare a răspunsului 400-octet din imaginea devine 1000 bytes, sau chiar mai mult, în funcție de anteturile cookie-uri adăugate. Dacă pagina aveți o mulțime de obiecte non-cache și domeniu de mare cookie, ar trebui să ia în considerare posibilitatea de a face resurse statice într-un alt domeniu (de exemplu, a făcut acest lucru Yandex, plasarea fișierelor statice pe domeniul yandex.net) și asigurați-vă că cookie-ul nu va exista niciodată.
există o destul de simplă regulă de numărul de cadre pe nota pagină la un nivel minim (în mod ideal, acestea nu ar trebui să existe, pentru că fiecare cadru implică crearea unui nou document în arborele paginii, care este suficient de intens de resurse) pentru a combina HTML-fișiere. Deci, să ne uităm la ce se poate face cu fișierele de stil.
CSS-fișier la începutul paginii
Atunci când se iau grijă de paginile web ale performanței ne dorim întotdeauna paginile pot fi trase treptat, astfel încât browser-ul poate afișa orice conținut de îndată ce el a afișat. Acest lucru este deosebit de important pentru paginile în care o mulțime de conținut bazate pe text, cât și pentru utilizatorii cu conexiuni lente. Importanța alerte vizuale utilizatorul despre starea curentă a paginii de descărcare unele indicator de progres studiat în detaliu și documentate. Dar, în orice caz, este întotdeauna mai bine dacă pagina în sine acționează ca un indicator al progresului. Atunci când browserul încarcă HTML-fișier treptat - în primul rând antet, apoi navigarea, logo-ul la partea de sus, etc. - toate acestea este un indicator excelent al sarcinii pentru utilizator. De asemenea, îmbunătățește impresia de ansamblu a site-ului.
cazare CSS în partea de jos a paginii nu permite să înceapă o afișare treptată a multor browsere, inclusiv minciuni și Internet Explorer. Browser-ul nu începe să vizualizeze pagina, pentru a evita să redesenarea elemente care vor schimba în timpul stilul de boot. Firefox începe să facă pagina imediat, procesul de boot poate re-desen unele elemente ca schimba proprietățile lor, dar este cauza conținutului unstyled și recursiv-l actualizare.
HTML 4 prevede precizarea că foaia de stil care urmează să fie incluse în documentul cap: „Spre deosebire de , Ea poate apărea numai în secțiunea , dar poate apărea orice număr de ori. " Nici una dintre alternative - ecranul de alb sau de afișare conținut unstyled - nu merita riscul (deși dezvoltatorii Firefox și Opera cred că un pic diferit). Soluția optimă este de a urma CSS caietul de sarcini și cap-includerea în această secțiune a documentului.
În proiectarea de site-uri mici sau modele simple, această regulă este esențială pentru maximizarea performanței. Cu toate acestea, mai târziu în acest capitol ne vom uita la alternative și interpretarea acesteia.
Combinând CSS-fișiere
Problema este că browser-ul nu afișează nici o parte a paginii (acest lucru nu se aplică la Opera: pagina ei este afișată fără fișiere complete CSS încărcare setate la setările implicite, le vezi după cum urmează: „Preferințe“ (ctrl-f12) ->“ navigare - avansat „>“ „->“ încărcare „sau“ instrumente -> «Setări» -> „avansați«->»circulație«->»încărcare“) până când loturile toate fișierele de stiluri - inclusiv cele dintre acestea, care nu sunt destinate pentru dispozitiv, cu ajutorul căruia sunt afișajul paginii. Cu alte cuvinte, browser-ul nu va afișa pagina până când încărcați stilurile de fișiere și imprimante, deși el nu avea nevoie să facă pagina. Este greșit în termeni de performanță, dar este (Safari, de fapt, se comportă doar „dreptul“: fișiere care nu sunt necesare, nu întârzie de încărcare, dar acesta este asociat cu caracteristica imagistica a modelului, spune despre aceasta în detaliu mai jos).
O soluție practică
Soluția pare destul de banal: putem, în general, CSS-fișier să declare regulile pentru orice dispozitiv prin intermediul @media. De exemplu, toate stilurile pentru imprimantă poate fi scris după cum urmează
imprimare @media <
reguli de stil pentru o imprimantă
>
la sfârșitul fișierul principal stiluri. Astfel, vor fi întotdeauna încărcate, doar un singur fișier. Această soluție poate fi ușor automatizat, iar unele CMS folosit deja această abordare (în mod specific, Drupal).
Dacă avem un CSS-fișiere sunt împărțite în module, este necesar să se revizuiască structura, astfel încât fiecare pagină a avut nu mai mult de două fișiere (fișiere mici - aproximativ 5K - pot fi combinate într-o singură pentru o secțiune). Pentru pagina principală, vă recomandăm întotdeauna limitată la un singur fișier sau chiar include în codul HTML (așa cum se procedează, de exemplu, pagina de start Yandex).
construcție finală arată aproximativ după cum urmează:
href = »ie6.css» media = »ecran» >
Pentru toate browserele utilizate main.css, iar pentru IE6 și de mai jos - ie6.css. Cu toate acestea, aceste versiuni ale Interner Explorer nu solicită fișierele de stil în paralel, astfel încât încarcă pagina apar întârzieri inutile asociate cu livrarea unui alt fișier.
Pentru ao evita (mai ales în cazul unui număr mic de stiluri specific pentru IE), puteți folosi CSS-hacks deja în original CSS-fișiere. De exemplu, în cazul în care avem nevoie pentru a defini o regulă numai pentru IE7, putem scrie:
* + Corp HTML <
margin: 0 auto;
>
* Organism HTML <
margin: 0 auto;
>
și IE5.5- (Acest grup nu recunoaște browser-ul de protectie de caractere, astfel încât să fie în măsură să se aplice doar prima regulă a celor două, a doua regulă va lucra pentru IE6, imperative prima):
* HTML marja corpului: 0;
Marg \ în: 0 auto;
>