Uvod v spletno uspešnost in kritično pot upodabljanja

Večina nas vsak dan dela s spletom. Za nas je postalo normalno, da smo skoraj takoj dobili vse potrebne informacije. Toda kako je ta spletna stran dejansko sestavljena in dostavljena nam, je malo skrivnost.

Včasih so spletne strani neverjetno hitre, včasih pa moramo dolgo čakati, da vidimo vsebino, kar pogosto povzroči, da smo precej razočarani in zapustimo stran. V naslednjem članku bom poskušal malo razčistiti stvari.

Izjava o omejitvi odgovornosti : Vse informacije, ki jih delim v tej objavi, so tisto, kar sem se naučil z brezplačnimi tečaji, omenjenimi spodaj in povzetimi tukaj za vse zainteresirane.

Kritična pot upodabljanja

Najprej bi bilo koristno razumeti korake, ki jih brskalnik dejansko prehaja. Začne se z navadnimi datotekami HTML, CSS in JavaScript, skozi upodabljanje in barvanje strani in na koncu prispe, da postane tisto, kar uporabnik vidi.

Ti koraki od različnih datotek HTML, CSS in JS do poslikane strani se običajno imenujejo kritična pot upodabljanja (ali na kratko CRP).

Kritična pot upodabljanja je sestavljena iz petih različnih korakov, ki so najbolje razloženi na sliki.

Izdelava DOM in CSSOM

Večina spletnih strani je sestavljena iz HTML, CSS in JavaScript, ki so vse pomemben del CRP. Da bi bral in obdeloval vaš HTML, bo brskalnik izdelal objektni model dokumenta (DOM). Brskalnik si ogleduje oznake HTML (

,

,

in

itd.) v vašem označevanju in jih pretvori v žetone, ki so nato vzporedno ustvarjeni v vozlišča. Z obdelavo teh žetonov StartTag in žetonov EndTag po vrstnem redu in ugotavljanjem, kateri so prvi, lahko brskalnik vzpostavi njihovo hierarhijo ter vzpostavi starše in otroke.

Vendar naj vas ta terminologija ne prestraši. Predstavljajte si DOM kot veliko drevo z vejami, ki predstavljajo nadrejena vozlišča in ki nato vsebujejo liste, podrejena vozlišča. To drevo bo predstavljalo odvisnosti vozlišč v našem HTML-ju in je nekoliko podobno temu:

Na zgornji sliki lahko vidimo korenski element, ki zajema vse njegove otroke, ki pa so starši, ki vsebujejo tudi otroke. Postavite to na glavo in videti bo skoraj kot drevo!

DOM tako predstavlja našo celotno oznako HTML. Kot ste videli, se postopoma gradi z obdelavo žetonov in pretvorbo v vozlišča. Pravzaprav lahko to izkoristimo v svojo korist, tako da vrnemo delni HTML in uporabniku damo do znanja, da se na strani nekaj dogaja in upodablja.

Po izdelavi DOM-a bo vaš brskalnik obdelal CSS in zgradil objektni model CSS (CSSOM). Ta postopek je zelo podoben gradnji DOM-a. Toda v tem procesu, v nasprotju s prej, podrejena vozlišča podedujejo pravila oblikovanja svojih nadrejenih vozlišč - od tod tudi ime Cascading Style Sheets (CSS).

Na žalost ne moremo postopoma obdelati delnih CSS-jev, kot bi lahko z DOM-om, saj bi lahko zlahka pripeljal do napačnih slogov, če nadomestni slog pride pozneje v procesu. To je razlog, zakaj CSS blokira upodabljanje, saj mora brskalnik ustaviti upodabljanje, dokler ne prejme in obdela CSS.

Drevo DOM in drevo CSSOM bosta vsebovali vsa vozlišča in odvisnosti, ki jih imamo na naši strani.

Zbiranje vse vidne vsebine - drevo upodabljanja

Brskalnik mora vedeti, katera vozlišča dejansko vizualno predstavlja na strani. Render Tree doseže točno to in je prikaz vidne vsebine DOM in CSSOM.

Drevo upodabljanja začnemo graditi tako, da identificiramo korensko vozlišče in nato kopiramo vse vidne podatke iz DOM in CSSOM. Za to preverimo tudi, ali iščemo oznake z istim izbirnikom. Metapodatki, povezave itd. Se ne kopirajo v drevo upodabljanja. Enako velja za CSS, ki vsebuje »display: none;« saj gre tudi za neviden predmet.

Ko zaključimo ta postopek, dobimo nekaj podobnega spodnjemu (opazite, kako se "spletna zmogljivost" ne kopira).

Render Tree je precej natančen opis tega, kar se vam dejansko prikazuje na zaslonu, zajema tako vsebino kot s tem povezane sloge. Seveda bi to v primerih iz resničnega življenja izgledalo veliko bolj zapleteno.

Pravilno se prilega - postavitev

Medtem ko zdaj vemo kajmoramo stran prikazati in upodabljati, pomembno je vedeti, kako je upodobljena. Da bo postavitev videti pravilna, moramo vedeti velikost brskalnika. Naša postavitev je odvisna od tega, da izračunamo pravilne položaje in mere za vse naše elemente na strani.

Vse to se zgodi med korakom postavitve. Upoštevanje koraka postavitve je še posebej pomembno za mobilne naprave, kjer se lahko naše stališče spremeni, ko med vrtenjem telefonov preklopimo med ležečim in pokončnim. To pomeni, da bi moral brskalnik znova zagnati korak postavitve vsakič, ko obrnemo telefon, kar bi lahko predstavljalo ozko grlo pri zmogljivosti.

Pobarvajte slikovne pike

Ta korak vključuje dejansko barvanje slikovnih pik na zaslon, določeno s tem, kaj (Render Tree) in kako (Layout). Korak slikanja vključuje dejansko slikanje slikovnih pik (na primer pri spreminjanju velikosti slike) v nasprotju s samo postavitvijo. To je tisto, kar na koncu vidite na zaslonu.

Povzemimo

Zdaj pa spet združimo vse te informacije, da bomo lahko videli, da smo vse korake, ki jih moramo opraviti, dojeli v kritični poti upodabljanja (CRP).

  1. Brskalnik začne z izdelavo DOM-a z razčlenitvijo vseh ustreznih HTML-jev.
  2. Nato nadaljuje z iskanjem virov CSS in JavaScript ter jih zahteva, kar se običajno dogaja v glavi, kamor običajno postavimo zunanje povezave.
  3. Nato brskalnik razčleni CSS in izdela CSSOM, čemur sledi zagon JavaScript-a.
  4. Nato se DOM in CSSOM združita v drevo upodabljanja.
  5. Nato zaženemo korak Postavitev in slikanje, da uporabniku predstavimo stran.

Dobro, to je dobro vedeti - ampak zakaj je to pomembno?

Zdaj je vse to lepo vedeti in bolje smo razumeli, kaj brskalnik dejansko počne v ozadju. Zakaj pa je to sploh pomembno? Ali moramo vsi vedeti, kaj se dogaja pod pokrovom motorja?

Ja, imamo!

Če nenehno povečujemo velikost svojih datotek in nismo pozorni na to, kaj brskalnik prosimo, da upodobi in pobarva na stran, bo brskalnik potreboval dlje časa, da obdela vse vire. To ponavadi povzroči počasnejšo in manj prijetno uporabniško izkušnjo, kar pomeni, da strani ne bodo uporabne in pravilno upodobljene, kar bo povzročilo frustracije na strani uporabnika.

To še posebej velja, če zahtevate stran s podeželja, kjer hitra širokopasovna povezava ni nujno najboljša.

Toda na srečo obstaja nekaj načinov, kako to rešiti, in naše strani lahko pospešimo hitreje!

Optimizacija zmogljivosti

Obstajajo številne strategije, ki jih lahko uporabimo za pospešitev in boljšo uporabo naših strani za naše uporabnike. To je še posebej pomembno za uporabnike, ki so morda na bolj oddaljenih lokacijah, kjer hitrejši internet ni norma ali kjer so strani pogosto dostopne prek mobilnega interneta.

Ko govorimo o optimizacijskih strategijah, imamo na voljo približno tri tehnike.

Minificiranje, stiskanje in predpomnjenje

Vse te tehnike je mogoče uporabiti za naš HTML, CSS in JS. Nato bodo z manjšo velikostjo zmanjšali količino podatkov, ki jih pošiljamo naprej in nazaj med odjemalcem in strežnikom. Čim manj bajtov moramo poslati, hitreje bo brskalnik dobil podatke in začel z obdelavo in upodabljanjem strani.

Zmanjšajte uporabo virov za blokiranje upodabljanja (CSS)

CSS sam blokira upodabljanje, kot smo že omenili, kar pomeni, da bo brskalnik prenehal upodabljati stran, dokler se CSS ne naloži in obdela.

Za velike datoteke CSS pa lahko omilimo tako, da odblokiramo upodabljanje za nekatere sloge in okna za prikaz. To storimo tako, da v medijskih poizvedbah, analitiki in usmerjenosti naprav uporabljamo pravila tiskanja (če želite vedeti, kako, predlagam, da si ogledate spodnje vire). Nadalje lahko zmanjšamo število virov, ki jih je treba naložiti, tako da v nekaterih okoliščinah vključimo nekaj našega CSS.

Zmanjšajte uporabo virov, ki blokirajo razčlenjevalnik (razčlenjevalnik dokumentov JS)

Za dosego tega lahko tudi odložimo izvajanje našega JavaScript-a in uporabimo asinhrske atribute v našem skriptu. To pomeni, da lahko preostali del strani obdeluje, medtem pa uporabnik vidi znak, da se na strani nekaj dogaja. To tudi pomeni, da nam ni treba čakati, da se JavaScript naloži.

Torej na splošno imamo tri optimizacijske vzorce:

  1. Zmanjšajte število poslanih bajtov
  2. Zmanjšajte število kritičnih virov na kritični poti upodabljanja (analitike morda ne bo treba naložiti na samem začetku, ko bo stran zgrajena)
  3. Skrajšajte kritično dolžino poti upodabljanja (kar pomeni zmanjšanje števila povratnih potovanj med brskalnikom in strežnikom, ki jih potrebujemo za upodabljanje strani)

Poskusite sami

Če želite to poskusiti in začeti z optimizacijo, lahko s številnimi orodji izmerite uspešnost svojega spletnega mesta ali drugih. Najlažji so verjetno Googlovi izdelki, kot sta PageSpeedInsights ali Google Lighthouse, priročna majhna razširitev za Google Chrome, ki jo lahko enostavno namestite prek trgovine Chrome App Store.

Samo kliknite razširitev in nato ustvarite poročilo in dobili boste poročilo, ki vključuje naslednje:

Nato lahko svojo uspešnost primerjate s številnimi meritvami, na primer First Pixel Painted to the Screen, First Interactive, Visual Completeness of your site in številnimi drugimi.

Orodja za razvijalce vašega najljubšega brskalnika so tudi odličen kraj za iskanje, kar zadeva čas nalaganja in ozka grla pri zmogljivosti. Če ohranimo nizke skupne obremenitve, bomo zagotovo povečali splošno hitrost, s katero se vaše spletno mesto streže vašim končnim uporabnikom.

Zaključek

Upamo, da je to osvetlilo notranje delovanje brskalnika, kako vam stran prikaže, in težko delo, ki ga mora opraviti v ozadju, da se prepričate, da se vaši HTML, CSS in JavaScript pravilno preoblikujejo.

Zavedanje teh korakov nam pomaga izboljšati učinkovitost obstoječih strani. Omogoča pa nam tudi, da smo pozorni na to, kako razvijamo aplikacije in spletna mesta, in razmišljamo o tem, kako naše strani iščejo ljudi na drugih območjih sveta.

Viri

Večino svojega znanja, ki sem ga delil tukaj, sem pridobil z naslednjim:

  1. Optimizacija uspešnosti spletnih strani na Udacity
  2. Zakaj je uspešnost pomembna pri Googlovih razvijalcih
  3. Visoko zmogljivo mreženje brskalnikov Ilya Grigorik (//hpbn.co/)
  4. Spletna mesta z visoko zmogljivostjo: Osnovno znanje za front-end inženirje Steve Souders