Cum este gestionat CSS
Stilul elementului este utilizat atunci când este creat
Noi percepem pagina ca o singură "imagine", cu designul și conținutul. Dar browserele procesează documentele treptat, într-un flux. Imediat ce browserul începe să primească documentul de la server, acesta începe să îl proceseze, fără a aștepta încărcarea completă. Fiecare nod este procesat și randat în fereastra browserului după primire. Luați în considerare un document simplu.
Apoi browserul întâlnește un element div cu id = "content". Din nou, în acest moment, el consideră că articolul este gol. Browserul calculează stilurile, iar elementul este desenat pe ecran. Browserul determină apoi dacă organismul trebuie redresat - de exemplu, a devenit mai larg sau mai lung (schimbarea dimensiunilor geometrice este efectul cel mai frecvent al efectului copilului asupra părintelui)?
Procesul continuă până la sfârșitul documentului.
Selectorii CSS sunt citiți de la dreapta la stânga
Pentru a determina dacă o regulă trebuie aplicată unui element, selectorul este citit de browser de la dreapta la stânga.
Dacă aveți, să zicem, regula div # content p
Acest principiu al muncii nu a fost ales din întâmplare. Browserul determină dacă se aplică regulile de stil elementului în momentul desenării mult mai rapid. Cu cât mai puține noduri trebuie să obțineți, cu atât mai repede va fi procesată regula.
Selectorii buni și răi
Aruncati o privire la recomandarile de viteza paginii Google. Ei au identificat patru, în opinia lor, cei mai lenți selectori:
Trebuie furnizate câteva explicații pentru utilizarea celor de mai sus. După cum puteți vedea, acești tipi ne spun că selectorii de componente utilizate - rele, încetini interfața dvs., deci trebuie doar să utilizați un simplu selector (de exemplu, celule, ID-ul, clasa, atribut, etc). Cu toate acestea, aceste reguli nu ar trebui să fie un ghid direct al acțiunii, altfel puteți merge la absurd și să vă întoarceți la vremuri
Desigur, pe proiecte precum Gmail acest lucru este complet justificat, dar pentru site-uri mult mai mici, ar trebui să găsiți un echilibru între aceste recomandări și bunul simț.
Ei spun că selectorul universal nu poate fi folosit, deoarece este foarte lent. Aiurea! Este lentă numai în compoziția selectorului de context, de exemplu #content p *. În sine nu este mai rău decât un element, clasă sau selector id.
În loc să încheiem
În general, este foarte important, în practică, să urmați aceste reguli care sunt departe de a fi evidente? De ce atunci restul armatei de selectori, dacă selectorii de muncă pot fi numărați pe degetele unei mâini? După cum am menționat deja, totul trebuie să fie echilibrat, bazat pe bunul simț. De ce nu salvați câteva sute de milisecunde, dacă nu costă nimic! Cu toate acestea, va fi nebun să petreceți ore pe această dezvoltare și teste.
În același timp, ați observat vreodată pe paginile cu capace de suspendare și coloane de frână noi? Acesta este rezultatul unui timp îndelungat, care este necesar pentru redesenarea derulării paginii.