Salutări, dragi cititori! Astăzi aș dori să evidențiez problema redării în dezvoltarea web. Desigur, multe articole au fost deja scrise pe această temă, dar, mi se părea că toate informațiile sunt destul de împrăștiate și fragmentate. Cel puțin să colectez întreaga imagine în capul meu și să o înțeleg, trebuia să analizez o mulțime de informații (în special limba engleză). De aceea am decis să-mi formalizez cunoștințele într-un articol și să împărtășesc rezultatul cu comunitatea lui Habr. Cred că informațiile vor fi utile atât dezvoltatorilor web novici, cât și celor mai experimentați pentru a-și reîmprospăta și structura cunoștințele.
Această direcție poate și ar trebui să fie optimizată în stadiul de aspect / dezvoltare a frontend-ului, deoarece este evident că marcajele, stilurile și scenariile participă direct la redare. Pentru a face acest lucru, profesioniștii relevanți trebuie să știe câteva subtilități.
Procesul de procesare a unei pagini web de către un browser
Mai întâi, luați în considerare secvența browserului atunci când afișați documentul:
- DOM (Document Object Model) este generat din documentul HTML primit de la nord.
- Stilurile încărcate și recunoscute sunt formate din CSSOM (CSS Object Model).
- Bazându-se pe DOM și CSSOM, se formează un arbore de randare sau un arbore de randare - un set de obiecte de redare (Webkit utilizează termenul "renderer" sau "render object" și Gecko este "frame"). Render tree duplică structura DOM, dar nu există elemente invizibile (de exemplu - . sau elemente cu afișare de stil: nici unul; ). De asemenea, fiecare linie de text este reprezentată în arborele de redare ca un redare separată. Fiecare obiect de redare conține obiectul DOM corespunzător (sau bloc de text) și stilul calculat pentru acest obiect. Pur și simplu, arborele de randare descrie reprezentarea vizuală a DOM.
- Pentru fiecare element arbore de randare, se calculează poziția de pe pagină - are loc aspectul. Browserele folosesc o metodă de flux, în care, în majoritatea cazurilor, o singură trecere este suficientă pentru a acomoda toate elementele (mai multe sunt necesare pentru tabelele de trecere).
- În cele din urmă, există un desen al acestui bun în browser-ul picturii.
În procesul de interacțiune a utilizatorului cu pagina, precum și a executării scripturilor, se modifică, ceea ce necesită repetarea executării unora dintre operațiile de mai sus.
Dacă schimbați stilul unui element care nu afectează dimensiunea și poziția sa pe pagină (de exemplu, culoarea de fundal, vizibilitatea culorii de frontieră), browserul o trage din nou, luând în considerare noul stil - apare repaint (sau restyle).
Dacă modificările afectează conținutul, apare structura documentului, poziția elementelor, o reflow (sau relayout). Motivele acestor modificări sunt de obicei:
- Manipularea cu DOM (adăugarea, ștergerea, schimbarea, rearanjarea elementelor);
- Modificați conținutul, inclusiv text în câmpuri de formă;
- Calcularea sau modificarea proprietăților CSS;
- Adăugarea sau eliminarea foilor de stil;
- Manipularea cu atributul "clasă";
- Manipularea cu fereastra browserului - redimensionare, defilare;
- Activarea pseudo-clase (de exemplu, .hover).
Optimizarea browserului
Navigatorii, dacă este posibil, localizează revopsirea și refolosirea în cadrul elementelor care au fost modificate. De exemplu, schimbarea dimensiunii unui element poziționat absolut sau fix va afecta numai elementul însuși și descendenții săi, în timp ce schimbați poziția poziționată în mod static va determina reluarea tuturor elementelor care o urmează.
Cu toate acestea, după cum este descris mai sus, accesarea proprietăților elementelor va cauza o refolosire forțată. Adică, dacă adăugăm un apel la proprietatea elementului din blocul de cod de mai sus, aceasta va cauza o reflow suplimentar:
În final, primim 2 rambursări în loc de unul. Prin urmare, este necesar să se grupeze proprietățile elementelor într-un singur loc, pentru a optimiza performanța (a se vedea exemplul mai detaliat al JSBin).
Dar, în practică, există situații în care nu puteți face fără reflow forțat. Să presupunem că avem o sarcină: trebuie să aplicăm aceeași proprietate unui element (luați "marginea-stânga") mai întâi fără animație (setat la 100px) și apoi - animați prin tranziție la 50px. Puteți vedea imediat acest exemplu pe JSBin. dar o voi semna aici.
Pentru a începe, vom obține o clasă cu tranziție:
Apoi, să încercăm să o implementăm după cum urmează:
Această soluție nu va funcționa așa cum era de așteptat, deoarece Modificările sunt stocate în cache și aplicate numai la sfârșitul blocului de coduri. Vom primi reflow forțat, drept rezultat, codul va primi următoarea formă și va îndeplini exact sarcina:
Sfaturi practice pentru optimizare
Pe baza acestui articol, precum și a altor articole despre Harb, care evidențiază problema optimizării JS, puteți obține următoarele sfaturi care vor fi utile în crearea unui frontend eficient:
- Scrieți HTML și CSS valide, specificând codificarea. Stilurile sunt cel mai bine incluse în . și scripturile - la sfârșit .
- Este necesar să se evite investițiile complexe ale selectorilor în CSS (aceasta este adesea vina dezvoltatorilor care utilizează preprocesoare). De asemenea, în loc de etichete, este mai bine să folosiți clase sau identificatori. De asemenea, ar trebui să evitați selectorul universal (*).
Sper că fiecare cititor a extras ceva util din articol. În orice caz - mulțumesc pentru atenție!