Code Coverage testib iga loetava stiililehe iga valijat reaalajas lehe suhtes, nii et näete, millised CSS-reeglid praegu mitte millegagi ei ühti, kui palju baite iga fail raiskab ja millised skriptid hoiavad esimest värvi.
Stiililehed ainult kasvavad. Teema saabub koos reeglitega lehtedele, mida teil pole, raamistik tarnib komponendid, mida te kunagi ei kasuta, ja kolm ümberkujundamist hiljem pole keegi kindel, milline pool failist on kandevõimeline. Tulemuseks on CSS, mis maksab igale külastajale ribalaiust ja renderdab aega reeglite edastamiseks, mida leht ei saa kasutada.
Code Coverage mõõdab seda otse. See järgib kõiki reegleid igal stiilitabelil, mida brauser laseb lugeda – sealhulgas meediumipäringute, @supports ja @layer plokkide sees olevaid reegleid – ning testib iga valijat reaalajas DOM-i suhtes. Reegel, mis ei ühti praegu mitte millegagi, teatatakse kui kasutamata, faili kohta koos protsendi, raisatud baitide ja valijate täieliku loendiga, mida saate laiendada ja kopeerida.
See on ilmsete lõksude suhtes ettevaatlik. Pseudoelemendid ja oleku pseudoklassid eemaldatakse enne sobitamist, nii et :hover või ::before reeglit hinnatakse selle põhjal, kas selle baasvalija on olemas, mitte ei oleks valesti maha kantud. Ilma CORS-i päisteta erineva päritoluga laaditabeleid ei saa lugeda ühegi skriptiga, seega märgitakse need loetamatuks, selle asemel et lugeda vaikselt täiuslikuks. Ja kuna skannimine kajastab lehte sellisena, nagu see sel hetkel on, näevad veel avatud menüüde, vahekaartide ja modaalide reeglid kasutamata – nii et avage need ja vajutage enne millegi kustutamist nuppu Skanni uuesti.
JavaScripti vahekaart vastab teisele küsimusele: kaal ja blokeerimine. See loendab iga skripti, mille leht laadib, koos selle edastusmahu, allalaadimisajaga ja sellega, kas see on asünkrooniline, edasilükatud, moodul, laaditakse dünaamiliselt või hoiab esimest värvi, ning seejärel arvutab blokeeritavate baitide arv. Seda ei müüda tahtlikult täitmise katvusena – teades, milliseid JavaScripti ridu käivitati, on vaja Chrome'i siluri API-t, mida DevSuite Pro ei taotle, nii et miski siin ei pretendeeri reataseme aruandele.
Iga loetava laaditabeli iga reeglit testitakse reaalajas DOM-i suhtes, sealhulgas meediumipäringute, @toetuste ja @kihiplokkide reegleid – seda ei hinnata failinimede ega suuruste järgi.
Igal stiilitabelil on kasutamata protsent, kasutatud versus kasutamata reeglite arv ja raisatud baitide arv, mis sorteeritakse nii, et kõige hullem rikkuja on ülaosas.
Laiendage mis tahes faili, et lugeda valikuid, mis ei ühti mitte millegagi, ja seejärel kopeerige need CSS-i plokina, et need oma redaktoris või meeskonnakaaslasele läbi töötada.
Pseudoelemendid ja oleku pseudoklassid, nagu :hover ja :focus-within, eemaldatakse enne sobitamist, nii et interaktiivseid reegleid hinnatakse mahakandmise asemel õiglaselt.
Iga skript on loetletud koos selle suuruse, allalaadimisajaga ja sellega, kas see on asünkrooniline, edasilükatud, moodul, dünaamiliselt laaditud või blokeeriv esimene värvimine – pluss kogu blokeerimisbait.
Loetamatud ristpäritolu laaditabelid märgistatakse pigem märgistusega kui punktidega ja JS-i vahekaart ütleb selgelt, et see mõõdab kaalu, mitte käivitatud ridu. Ei mingeid väljamõeldud numbreid.
Ostetud teema tarnib CSS-i kümnete demopaigutuste jaoks. Vaadake, kui suurt osa sellest teie sait kunagi ei kasuta, ja vähendage faili tõendite, mitte oletustega.
Kontrollige, kui suur osa CSS-i raamistikust säilib pärismallil ja kas teie puhastus- või puuraputamiskonfiguratsioon teeb seda, mida arvate.
Loetlege renderdamist takistavad skriptid koos nende suurustega ja otsustage, mida edasi lükata, jagada või tühistada, et sisu kiiremini ekraanile jõuaks.
Kõndige numbritega: millised failid raiskavad kõige rohkem baite, kui palju JavaScripti blokeerib ja kus esimene töötund tasub end kõige rohkem ära.
Kui võtate üle saidi, mida te ei loonud, saate kiiresti lugeda, kui palju selle CSS-i ja JavaScripti endiselt oma koha teenib.
Klõpsake DevSuite Pro dokis ikooni Code Coverage. Skannimine käivitub kohe ja annab teada, mitu reeglit see kontrollis ja milline osa neist on kasutamata.
Ülemine rida annab teile stiilitabeli arvu, kogureeglid, kasutamata protsendi ja raisatud baidid. Allolevad failid on järjestatud nende raiskamise järgi.
Klõpsake mis tahes failis nuppu Kuva kasutamata valijad, et täpselt lugeda, millised reeglid sellel lehel mitte millelegi ei vasta.
Avage menüüd, vahekaardid, akordionid ja modaalid, seejärel vajutage uuesti skannimist. Reeglid, mille elemendid eksisteerivad ainult nendes olekutes, liiguvad kasutamata asemel kasutatud – tehke seda alati enne kustutamist.
Kasutamata valijate kopeerimine annab teile CSS-i ploki, mille abil saate läbi töötada; Ekspordi JSON kopeerib pileti või auditidokumendi täieliku aruande, sealhulgas JavaScripti inventari.
Paigaldage DevSuite Pro tasuta ja avage 71+ arendustööriista oma brauserile.
