Šiame vadove sužinosite apie naudingas " Chrome" programuotojo įrankių skirtuko " Rendering" funkcijas. Šis įrankis labai svarbus optimizuojant žiniatinklio programų našumą. Sužinosite, kaip derinti išdėstymą, optimizuoti animacijas ir kokią reikšmę atvaizdavimo greičiui turi naudotojo patirtis. Pasinerkime į ją ir ištirkime įvairias funkcijas, kurios padės pagerinti jūsų žiniatinklio programų atvaizdavimą.
Pagrindinės žinios
- Skirtuke "Atvaizdavimas" siūlomi įvairūs įrankiai, skirti analizuoti ir optimizuoti atvaizdavimo procesą.
- Šio skirtuko parinktys leidžia optimizuoti animacijas, išdėstymo stilius ir naudotojų patirtį.
- Stebėdami atvaizdavimo statistiką, galite atpažinti ir pašalinti galimus trikdžius.
Žingsnis po žingsnio vadovas
Prieiga prie atvaizdavimo skirtuko
Norėdami pasiekti skirtuką "Atvaizdavimas", turite atidaryti "Chrome" programavimo įrankius. Tai galite padaryti dešiniuoju pelės klavišu spustelėję puslapį ir pasirinkę "Explore" arba paspaudę klavišų kombinaciją Ctrl + Shift + I. Atidarę "Developer Tools", spustelėkite viršutiniame dešiniajame kampe esantį meniu su trimis taškais ir pereikite prie "More tools", tada prie "Rendering".
Flexbox vizualizacija
Prieš apžvelgdami skirtuką "Rendering", pažvelkime į šoninę juostą "Elements", kurioje galite pritaikyti įvairias išdėstymo savybes. Čia naudinga funkcija yra dėžutės redaktorius. Norėdami sukurti flexbox maketą, galite spustelėti mygtuką "Open Box Editor" (atidaryti langelių redaktorių). Čia matysite flex savybių, tokių kaip flex-direction (lankstumo kryptis), justify-content (pateisinti turinį) ir align-items (sulygiuoti elementus), apžvalgą. Šios nuostatos leidžia tiesiogiai daryti įtaką maketui.
Optimizuoti animacijas
Kitas svarbus aspektas yra animacija. Norėdami derinti animacijas, pasirinkite elementą su animuota savybe ir įjunkite "Hover". Galite stebėti, kaip šrifto dydžio reikšmė padidėja nuo 50 pikselių iki 100 pikselių. Tai leidžia koreguoti perėjimo savybes, kad animacija būtų sklandesnė.
Galimi atvaizdavimo nustatymai
Dabar pereiname prie tikrojo atvaizdavimo skirtuko, kurį, jei reikia, galite perkelti į viršutinę kūrėjo įrankių poziciją. Skirtuke Rendering (Atvaizdavimas) rasite daugybę žymimųjų langelių ir parinkčių, kurios padės geriau suprasti procesą ir atpažinti klaidas. Viena iš svarbiausių funkcijų yra režimas "Paint Flashing" ("Dažų mirgėjimas"), kuris parodo, kurios puslapio sritys šiuo metu yra iš naujo atvaizduojamos.
Naudojimasis "Paint Flashing" režimu
Suaktyvinkite "Paint Flashing", kad pamatytumėte, kurios svetainės sritys naršant paryškinamos žaliai. Tai naudinga, jei norite atlikti optimizavimą, nes parodo, kur kyla atvaizdavimo problemų arba kur animacija veikia netolygiai. Jei matote, kad daugelis puslapio dalių atvaizduojamos be reikalo, tai gali būti neveiksmingo kodo požymis.
Sluoksnių ribų ir rėmų atvaizdavimo statistika
Dar viena naudinga funkcija yra Layer Border (sluoksnio ribos) rodinys; jis parodo atvaizdavimo dalis, kurias naudoja GPU. Taip pat galite analizuoti kadrų perteikimo statistiką, kad įvertintumėte savo animacijų našumą. Šioje srityje galite matyti, kiek kadrų per sekundę (FPS) yra atvaizduojama ir ar yra kokių nors kliūčių, galinčių turėti įtakos našumui.
Slinkimo našumas
Norėdami optimizuoti slinkties suvokimą, įjunkite slinkties našumo parinktį. Galite pastebėti, kur yra vėlavimų. Tai ypač svarbu siekiant užtikrinti malonią naudotojo patirtį, todėl tai visada reikėtų stebėti.
Pirmasis turinio piešimas ir sąveikos vėlavimas
Taip pat galite išmatuoti laiką, kol bus atliktas didžiausias turinio atnaujinimas arba kol bus galima atlikti pirmąją sąveiką. Tai leidžia aiškiai suprasti, kaip greitai reaguoja jūsų svetainė, kai ją įkelia naudotojai. Pavyzdžiui, siekiant užtikrinti optimalią naudotojų patirtį, gali būti labai svarbu, kad puslapis reaguotų greičiau nei per 100 milisekundžių.
Prieinamumo testavimas
Dar viena itin naudinga funkcija kūrėjams - galimybė imituoti prieinamumo nustatymus. Galite pamatyti, kaip jūsų svetainė atrodys riboto regėjimo žmogui. Tai apima spalvinio aklumo ir kontrasto problemų imitavimą.
Šriftų valdymas
Atvaizdavimo skirtuke taip pat galite išjungti vietinius šriftus, kuriuos naudos naršyklė. Tai naudinga norint užtikrinti, kad šriftai būtų įkeliami iš jūsų žiniatinklio serverio, arba nustatyti galimus skirtingų šriftų konfliktus.
Apibendrinimas
Skirtukas "Rendering" (Atvaizdavimas) naršyklėje "Chrome Developer Tools" yra pagrindinis įrankis visiems žiniatinklio kūrėjams, norintiems optimizuoti savo svetainių našumą ir naudotojų patirtį. Suprasdami ir naudodamiesi įvairiomis funkcijomis, galite imtis tikslingų veiksmų galimoms problemoms šalinti ir užtikrinti sklandesnį atvaizdavimą. Šiame skirtuke rasite viską, ko reikia svetainei optimizuoti - nuo "flexbox" redagavimo iki slinkties našumo ir prieinamumo patikrinimo.
Dažniausiai užduodami klausimai
Kaip atidaryti skirtuką "Rendering" "Chrome Developer Tools"?Skirtuką "Rendering" galite atidaryti atidarydami "Developer Tools" ir meniu pereidami į "More tools", o tada į "Rendering".
Kas yra "Paint Flashing" ir kaip ją naudoti? "Paint Flashing" yra funkcija, kuri paryškina visas vaizduojamas sritis. Ją suaktyvinate skirtuke "Rendering" (Atvaizdavimas), kad būtų lengviau derinti.
Kaip galiu patikrinti savo animacijų našumą? Galite suaktyvinti "Frame Rendering Stats" ir stebėti savo animacijų FPS.
Kaip imituoti svetainės prieinamumą? Atvaizdavimo skirtuke yra parinkčių, kuriomis galima imituoti apribojimus dėl spalvinio aklumo ar kitų regos sutrikimų.
Ką daryti, jei matau, kad daugelis mano puslapio dalių atvaizduojamos be reikalo? Jei pastebėjote daug nereikalingo atvaizdavimo, turėtumėte patikrinti, ar jūsų kodas nėra neefektyvus, ir įdiegti galimus patobulinimus.
