Kuidas kirjutada paremat CSS koos toimimisega meeles

Tänapäeva postituses mõtleme koodi valikute üle, mida saame CSS-is teha, et parandada saidi jõudlust. Kuid enne, kui me nendesse valikutesse sukeldame, vaadake kõigepealt lühidalt lähemalt veebilehe esitamise töövoogu, et keskendudaproblemaatilised (tulemuslikkuse) alad, mis on lahendatavad CSS-i kaudu.

Siin on brauseri poolt pärast DOM-i loomist tehtud toimingute ligikaudne voog:

1. Stiili ümberarvutamine (ja puude loomise muutmine). Brauser arvutab DOM-i puu elementidele rakendatavad stiilid. Hiljem luuakse renderipuu, kui heidetakse DOM-i puust sõlmed (elemendid), mida ei saa muuta (elemendid koos kuva: pole) ja need, mis on (pseudo-elemendid).
2. Paigutus (teise nimega Reflow). Kasutades eelnevalt arvutatud stiili, arvutab brauser lehekülje iga elemendi asukoha ja geomeetria.
3. Värvige uuesti. Kui paigutus on kaardistatud, joonistatakse pikslid ekraanile.
4. Komposiitkihid. Värvimise ajal võib maali teha erinevates kihtides iseseisvalt; need kihid ühendatakse lõpuks kokku.

Nüüd jätkame sellega, mida me saame teha operatsiooni esimestel kolmel etapil, et kirjutada paremini toimivaid CSS-koode.

1. Vähendage stiili arvutusi

Nagu eelnevalt mainitud, arvutab brauser "ümberarvutuse stiili" etapis elementidele rakendatavad stiilid. Selleks avastab brauser kõigepealt kõik CSS-i valikud, mis viitavad DOM-i puuli antud elemendi sõlme. Siis läheb see läbi kõigi selektorite stiilireeglite ja otsustab, milliseid neid elemente tegelikult rakendada.

Kulukate stiiliarvutuste vältimiseks, vähendada keerukaid ja sügavalt sisestatud valikuid nii, et brauseril oleks lihtsam välja selgitada, milline element valijal on. See vähendab arvutamise aega.

Muude tööviiside hulka kuuluvad stiilieeskirjade arvu vähendamine (kus võimalik), kasutamata CSS eemaldamine ja vältida koondamine ja tühistamine, nii, et brauser ei pea stiiliarvutuste ajal korduvalt ja sama stiili läbima.

2. Vähendage tagasilööke

Elemendi muudatused või paigutuse muudatused on väga kallid protsessid ja need võivad olla veelgi suuremad probleemid, kui paigutuse muudatuste läbinud elemendil on märkimisväärne hulk lapsi (kuna Peegeldab hierarhias cascade'i).

Peegeldusi käivitab elemendi paigutuse muutmine, näiteks geomeetriliste omaduste muutmine, näiteks kõrgus või fondi suurus, klasside elementide lisamine või eemaldamine, akna suuruse muutmine, aktiveeritud :hõljuma, DOM muudab JavaScripti jne.

Täpselt nagu stiili arvutamisel, vähendatakse ka tagasilööke, vältida keerulisi valikuid ja sügavad DOM-i puud (jällegi on see selleks, et ära hoida ülemääraste tagasilöögikordade liigset kaskaadimist).

Kui teil on vaja muuta lehekülje paigutuse stiili, sihtige elementide stiilid, mis on elementide hierarhias kõige madalamad et komponent on valmistatud. See on nii, et paigutuse muudatused ei tekita (peaaegu) teisi tagasilööke.

Kui te animate elementi, mis läbib paigutuse muudatusi, võtke see leheküljevoolust välja kõrval selle ebaühtlane paigutamine, kuna Reflow absoluutselt paigutatud elementides ei mõjuta ülejäänud lehekülje elemente.

Kokku võtma:

• Sihtelemendid, mis on paigutuse muutmisel DOM-puus madalamad
• Valige absoluutselt paigutatud elemendid paigutuse muutmise animatsioonide jaoks
• Vältige võimaluste piires paigutusomaduste animeerimist

3. Vähendage uuesti

Värvimine viitab pikslite joonistamisele ekraanil ja on kulukas protsess nagu Reflow. Tagasilööke saab käivitada Reflows, lehe kerimine, omaduste muutused nagu värv, nähtavus ja läbipaistmatus.

Et vältida sagedasi ja tohutuid kordusi, kasutage vähem kulukaid kordusi põhjustavaid omadusi nagu varjud.

Kui te animate elemente, mis võivad vahetult või kaudselt uuesti esile kutsuda, on see väga kasulik kui see element on oma kihil takistab selle värvimist, et see mõjutaks ülejäänud lehekülge ja käivitaks riistvara kiirenduse. Riistvara kiirendamisel võtab GPU ülesande täita kihi animatsioonimuutusi, salvestades protsessori lisatööd, kiirendades protsessi.

Mõnes brauseris, läbipaistmatus (mille väärtus on väiksem kui 1) ja teisendada (muu kui mitte ükski) reklaamitakse automaatselt uutesse kihtidesse ning animatsioonide ja üleminekute puhul rakendatakse riistvarakiirendust. Nende omaduste eelistamine animatsioonidele on seega hea.

Tugevalt edendada uut kihti ja minna riistvarakiirendusse animatsiooni jaoks on kaks tehnikat:

1. lisama transform: translate3d (0, 0, 0); elemendi külge, pannes brauseri sisse riistvara kiirendamiseks animatsioonide ja üleminekute jaoks.
2. lisa muutub elementi, mis teavitab brauserit omadustest, mis võivad elemendis tulevikus tõenäoliselt muutuda. Märge: Sara Soueidanil on Dev.Opera veebilehel selle kohta põhjalik ja ülimalt kasulik artikkel.

Kokku võtma:

• Vältige kulukaid stiile, mis põhjustavad kordusi
• Otsige kihi edendamist ja riistvara kiirendamist kopsakaid animatsioone ja üleminekuid.

Võtta teadmiseks

(1) Nii et me pole nüüd CSS-faili suuruse vähendamist puudutanud. Oleme maininud, et stiilieeskirjade (ja DOM-elementide) vähendamine teeb olulise tulemuslikkuse paranemise kui palju peab brauser töötama vähem stiilide arvutamise protsessist. Selle koodide vähendamise tagajärjel kirjutatakse paremaid valikuid ja kustutatakse kasutamata CSS, faili suurus väheneb automaatselt.

(2) Samuti on soovitatav mitte teha liiga palju muudatusi elemendi stiilides JavaScriptis. Selle asemel lisage klassile element (kasutades JavaScripti), mis hoiab uusi muudatusi nende stiilide jaoks - see takistab tarbetuid tagasilööke.

(3) Sa tahad vältige paigutuse väljumist samuti (sünkroonne sünkroniseerimine), mis tuleneb elementide paigutusomaduste ligipääsust ja muutmisest JavaScripti abil. Lisateavet selle kohta, kuidas see jõudlust siin tapab.