Kodo aprėptis tikrina kiekvieną kiekviename skaitomame stiliaus lape esantį parinkiklį, palyginti su tiesioginiu puslapiu, kad galėtumėte pamatyti, kurios CSS taisyklės šiuo metu nieko neatitinka, kiek baitų iššvaisto kiekvienas failas ir kurie scenarijai sulaiko pirmąjį dažymą.
Stilių lapai tik auga. Atkeliauja tema su taisyklėmis puslapiams, kurių neturite, sistema pristato komponentus, kurių niekada nenaudojate, o po trijų pertvarkymų niekas nežino, kuri failo pusė yra apkrova. Rezultatas yra CSS, kuris kainuoja kiekvienam lankytojui pralaidumą ir laiko pateikimą taisyklėms, kurių puslapis negali naudoti.
Kodo aprėptis matuoja tiesiogiai. Jis atlieka kiekvieną taisyklę kiekviename stiliaus lape, kurį naršyklė leis jai perskaityti, įskaitant taisykles, esančias medijos užklausose, @supports ir @layer blokuose, ir kiekvieną parinkiklį tikrina pagal tiesioginį DOM. Taisyklė, kuri šiuo metu nieko neatitinka, pranešama kaip nenaudota, kiekvienam failui, nurodant procentą, iššvaistomus baitus ir visą parinktuvų, kuriuos galite išplėsti ir nukopijuoti, sąrašą.
Jis yra atsargus dėl akivaizdžių spąstų. Pseudoelementai ir būsenos pseudoklasės pašalinamos prieš suderinant, todėl taisyklė :hover arba ::befor vertinama pagal tai, ar jos bazinis parinkiklis egzistuoja, o ne neteisingai nurašytas. Stilių lapų, teikiamų įvairios kilmės be CORS antraščių, negali perskaityti joks scenarijus, todėl jie pažymimi kaip neįskaitomi, o ne tyliai laikomi tobulais. Kadangi nuskaitymas atspindi puslapį tokį, koks jis yra tuo metu, dar neatidarytų meniu, skirtukų ir modalų taisyklės atrodys nenaudojamos – taigi atidarykite jas ir prieš ką nors ištrindami paspauskite nuskaityti iš naujo.
„JavaScript“ skirtukas atsako į kitą klausimą: svorį ir blokavimą. Jame aprašomas kiekvienas puslapio įkeliamas scenarijus, nurodant perdavimo dydį, atsisiuntimo laiką ir tai, ar jis asinchroninis, atidėtas, modulis, įkeltas dinamiškai, ar sulaikantis pirmą dažymą, tada suskaičiuojama, kiek baitų blokuoja. Jis sąmoningai neparduodamas kaip vykdymo aprėptis – žinant, kurios „JavaScript“ eilutės buvo paleistos, reikalinga „Chrome“ derinimo API, kurios „DevSuite Pro“ neprašo, todėl niekas čia nepretenduoja į eilutės lygio ataskaitą.
Kiekviena taisyklė kiekviename skaitomame stiliaus lape yra patikrinta pagal tiesioginį DOM, įskaitant taisykles medijos užklausose, @supports ir @layer blokus – neapskaičiuota pagal failų pavadinimus ar dydžius.
Kiekviename stiliaus lape pateikiamas nepanaudotas procentas, panaudotų ir nepanaudotų taisyklių skaičius ir iššvaistytų baitų skaičius, surūšiuotas taip, kad blogiausias pažeidėjas būtų viršuje.
Išskleiskite bet kurį failą, kad perskaitytumėte nieko neatitinkančius parinkiklius, tada nukopijuokite juos kaip CSS bloką, kad galėtumėte juos apdoroti redaktoriuje arba komandos draugui.
Pseudoelementai ir būsenos pseudoklasės, pvz., :hover ir :focus-in, pašalinami prieš suderinant, todėl interaktyvios taisyklės vertinamos teisingai, o ne nurašomos.
Kiekvienas scenarijus pateikiamas su jo dydžiu, atsisiuntimo laiku ir tuo, ar jis yra asinchroninis, atidėtas, modulis, dinamiškai įkeltas ar blokuojantis pirmąjį dažymą, pridėjus visus blokuojamus baitus.
Neįskaitomi įvairių kilmės stilių lapai pažymimi, o ne vertinami, o skirtuke JS aiškiai nurodyta, kad matuojamas svoris, o ne vykdomos eilutės. Jokių sugalvotų skaičių.
Įsigyta tema pristato CSS, skirtą dešimčiai demonstracinių maketų. Pažiūrėkite, kiek to jūsų svetainė niekada nenaudoja, ir sutrumpinkite failą naudodami įrodymus, o ne spėliones.
Patikrinkite, kiek CSS sistemos išgyvena naudojant tikrą šabloną ir ar jūsų išvalymo arba medžio drebėjimo konfigūracija atlieka tai, ką manote.
Išvardykite scenarijus, sulaikančius atvaizdavimą, su jų dydžiais ir nuspręskite, ką atidėti, padalinti ar atsisakyti, kad turinys būtų rodomas greičiau.
Eikite su skaičiais: kurie failai iššvaisto daugiausiai baitų, kiek „JavaScript“ blokuoja ir kur labiausiai apsimoka pirmoji darbo valanda.
Perimdami svetainę, kurios nesukūrėte, greitai perskaitykite, kiek jos CSS ir JavaScript vis dar užima savo vietą.
„DevSuite Pro“ doke spustelėkite piktogramą Code Coverage. Nuskaitymas paleidžiamas iš karto ir pranešama, kiek taisyklių buvo patikrinta ir kokia jų dalis yra nepanaudota.
Viršutinėje eilutėje pateikiamas stiliaus lentelės skaičius, bendros taisyklės, nepanaudotas procentas ir iššvaistomi baitai. Toliau pateikti failai surikiuoti pagal tai, kiek jie iššvaisto.
Spustelėkite rodyti nenaudojamus parinkiklius bet kuriame faile, kad tiksliai perskaitytumėte, kurios taisyklės neatitinka nieko šiame puslapyje.
Atidarykite meniu, skirtukus, akordeonus ir modalus, tada paspauskite Nuskaityti iš naujo. Taisyklės, kurių elementai egzistuoja tik tose būsenose, iš nenaudojamų pereis į naudotas – visada darykite tai prieš ištrindami.
Kopijuoti nenaudojamus parinkiklius suteikiamas CSS blokas, kurį reikia atlikti; Eksportuoti JSON nukopijuoja visą ataskaitą, įskaitant „JavaScript“ inventorių, skirtą bilietui arba audito dokumentui.
Įdiekite „DevSuite Pro“ nemokamai ir atrakinkite 71+ kūrėjų įrankius savo naršyklei.
