Umjetnost učitavanja unapred: Eliminišite 'blink' teme sa JavaScript-om i CSS-om

Pretpostavite scenu: provedli ste sate da dizajnirate prekrasnu tamnu temu za vašu web aplikaciju. Boje su savršeno ubalansirane, kontrast je optimalan, a vaši korisnici vole ovu opciju. Ali postoji sramotan problem: pri svakom ponovnom učitavanju stranice, tokom frakcije sekunde, prikazuje se podrazumevana svetla tema pre nego što tema tamna preuzme kontrolu.

Ova vizuelna „blikavica“, iako kratka (ponekad manje od 100ms), odmah je primetljiva ljudskom oku i stvara neprijatno iskustvo. Za korisnike koji su izabrali tamu tema iz razloga vizuelnog komforta ili pristupačnosti, ovaj blik može biti i bolestan, naročito u slabo osvetljenom okruženju.

Ovaj fenomen je varijanta onog što se naziva "Flash of Unstyled Content" (FOUC), klasicni problem u razvoju web-a koji se vodi u ranim danima CSS-a. FOUC se pojavljuje kada pregledač privremeno prikaže HTML sadržaj bez primijenjenih CSS stilova, stvarajući bljesak nesstilizovanog sadržaja.

U našem specifičnom slučaju ne govorimo o potpuno ne stilizovan sadržaju, već oIsbljek pogrešne teme(FOWT) - sadržaj je oblikovan, ali sa lošom temom. To je posebno frustrirajuće jer pokazuje da naša aplikacija "zaboravi" korisnikov preference pri svakom učitavanju stranice.

Ovaj problem, iako je tehnički, ima važna posledica na percepciju kvaliteta vaše aplikacije :

Nedostatak poliranja: Migotanje dava utisak da je aplikacija nedovršena ili loše optimizovana. Korisnici često povezivaju ove male vizuelne greške sa nedostatkom opšte profesionalnosti.

Prekid koherencije: Апликација каж да "заборавља" корисничке поставке, стварајући осет десинхронизације међу интерфесом и очекиванияма

Vizuelna umora: Za korisnike osjetljive na svetlo ili koji patnje od migrene, ovaj svetlosni blisk može biti više nego samo estetski nezgodnost.

Перцепција перформаниIronično, čak i ako vaš sajt brzo se učitava, ovaj mrgudanje može dati utisak da je aplikacija spora ili neodgovarajuća.

Da bi razumeli kako rešiti ovaj problem, prvo treba da razumemo zašto se pojavljuje. Treptanje se pojavljuje zbog vremenskog odmaka između tri kritična događaja u životnom ciklusu jedne web stranice:

Problema nastaje kada se dogadaj broj 3 (izvršavanje JavaScripta) desava nakon što je preglednik već počeo ili završio dogadaj broj 2 (primenjivanje stilova). U tom trenutku, preglednik je već donuo odluku koja tema će biti prikazana, a vaš kod dolazi previše kasno da utice na to pre prvog prikaza.

Najprirodniji pristup za programera bi bio da se skript postavi na kraju našeg.`<body>`Ovaj pristup sledi tradicionalne najbolje prakse veba koje preporučuju da se skripte učitavaju na kraju stranice da ne blokiraju renderovanje.

Ovaj pristup čini se logičnim na prvi pogled. Čekamo da DOM bude spreman, zatim primenjujemo temu. Jednostavno, ne? Nažalost, jednostavnost skriva temeljni grešak povezan sa timingu ciklusa renderovanja pretraživača.

Догађај`DOMContentLoaded`покреће се када је првобитни HTML документ потпуно учитаван и анализиран од стране прегледача,bez čekanjakraj učitavanja stilova, slika i podokvira. To je važna tačka koju treba razumeti.

Evo tipične sekvence događaja:

Problem ? Medu korakom 6 (DOMContentLoaded) i korakom 8 (prvi paint), pregledač je već donio odluke o tome kako da prikaže stranu. Ako vaš skript za promenu teme izvrši se na koraku 6, već je kasno da se izbegne prvi prikaz sa zadanim stilovima.

U stvari, vremenski raspored je još kompleksniji. Moderni pretraživači koriste sofisticirane tehnike optimizacije da poboljšaju percepcionu performanse. Pokušavaju da učine prvo bojanje sadržaja (First Contentful Paint) što je moguće brže da korisnik vidi nešto na ekranu.

CSS-ovi su po defaultu "render-blocking", što znači da pretraživač čeka da skinuo i parsira stilove pre nego što uradi prvo crtanje. Logično: ne želimo da prikažemo ne stilizovan sadržaj.

Ali ovde je kap: kada pretraživač primeni ove CSS stilove za prvi put, on to radi na osnovu trenutnog stanja DOM-a. Ako atribut`data-bs-theme`Još nije definisan na etiketi`<html>`, pretraživač će primeniti podrazumevane stilove (obično svetla tema).

Zatim, kada vaš skript se izvrši i promeni ovaj atribut, pretraživač mora:

Ovaj proces ponovnog računanja i ponovnog bojenja jeste onaj što izaziva vidljivo mrskanje.

Da bolje razumemo ovu problematičnu sekvencu, pogledajmo detalljan dijagram sekvence:

Ovaj dijagram jasno ilustruje problem: prvi paint se dešava pre nego što je naš skript imao priliku da definiše pravu temu. Sledeći repaint stvara vidljiv blinkanje.

Pokušalo je više pristupa da se reši ovaj problem, ali većina njih ima sopstvene nedostatke:

Приступ 1 : Сакривати садржај док се не учита

Овај приступ сакрива сав садржај док JavaScript не подеси правилу теме. Проблем? Ово искуштвено одлага приказ садржаја, дający утисак да је сајт спорији. Додатно, ако је JavaScript онемогућен, корисник не види ништа уопште!

Prilazak 2: Korišćenje loader/spinner

Similiran je pristup 1, ali sa spinnerom za učitavanje. To sakriva problem, ali ne poboljšava stvarnu performanse i dodaje nepotrebno perceprano kašnjenje.

Приступ 3 : подразумевана тема у тмони

Neki programeri definišu temnu temu kao podrazumevano u CSS-u. Ovo sprečava treperenje za korisnike temne teme, ali pravi obrnuti problem za korisnike svetle teme!

Ни једна од ових приступа није задоволљива јер лече симптом уместо основног узроцa проблема.

Ključ za rešavanje ovog problema je da budemo svesni da moramo da definišemo atribut`data-bs-theme` преda pregledač ne počne da primenjuje CSS stilove. Ovo znači da nas skripta mora da se izvrši ranije u životnom ciklusu stranice, i to je tačno što ćemo istražiti u sledećoj sekciji.

Elegantno rešenje naše problema sa miricanjem se temelji na jednostavnom, ali jakom principe :Synchronizuj stanje aplikacije sa procesom renderovanja pregledača.. Umesto da čekamo da se stranica učita da bismo postavili temu, moramo je postavitidokučitavanje, još pre nego što se stilovi CSS primene

Ovaj se pristup naziva "Early Loading" ili "Synchronous Preloading" u žargonu web razvoja. Ideja je izvršiti našu logiku detekcije teme što je moguće ranije u životnom ciklusu stranice, idealno u etiketi`<head>`, пре него што прегледник започне да скачива CSS датотеке.

Le `<head>`HTML dokument se obradjuje sekvencijalno pretraživačem, od gore prema dolje. Svaki element se obrađuje u redu u kojemu se pojavljuje. Ova karakteristika je ključna za naše rešenje.

Kada pretraživač naiđe na oznaku`<script>`у`<head>`bez atributa`async` ou defer, il :

Ovo ponašanje, koje se često smatra problemom performansi (iz kog razloga je uobičajena preporuka da se skriptovi postavljaju na dnu stranice), postaje naš saveznik u ovom specifičnom slučaju. Postavljanjem našeg skripta za detekciju teme na početku`<head>`, garantujemo da se izvrši pre nego što pretraživač naiđe na oznake`<link>`naših stilova.

Naše kompletno rešenje se sastoji od tri međuzavisne sloja, svaki od njih igra specijalnu ulogu:

Слой 1: Постојаност (localStorage) Ovaj sloj je odgovoran za čuvanje i vraćanje izbora korisnika između sesija.

Слој 2 : Рана синхронизација (убачен скрипт у <head>) Ovaj sloj sinhronizira stanje aplikacije sa DOM-om pre inicijalnog renderovanja.

Слој 3 : Реактивни стилови (CSS са селекторима атрибута) Ovaj sloj definiše vizuelne stilove koji su zasnovani na stanju definisanom od strane sloja 2.

Sada detaljno istražujemo svaki sloj.

Le localStorage`je Web Storage API koja omogućuje skladištenje parova ključ-vrednost u pretraživaču na trajani način. U suprotnosti od kolačića, podaci`localStorage(Translation of empty string is empty string, so output nothing)

За наш случај употребе,`localStorage`је савршен jarra :

Ovo je kako čuvamo izbor korisnika kada menja temu:

Izuzetno je važno da se upravlja slučajevima kod kojih`localStorage`nije dostupan ili pristupačan. Prikoliko scenarija mogu sprečiti pristup`localStorage`:

Striktno privatno pretraživanje: Safari u privatnom načinu preglađanja baca izuzetak`QuotaExceededError`u pokušajima pisanja u`localStorage`.

Подешавања приватности: neki pregledači ili proširenja za privatnost mogu blokirati pristup`localStorage`.

Ograničenja domena : Le `localStorage`nije dostupan na protokolu`file://`у неким претраживачам.

Popunjen prostor za skladištenjeIako retko, prostor za skladištenje može biti potpuno popunjen.

Zato naš kod koristi blok`try…​catch`Za rukovanje tim slučajevima uz ljubaznost, nastavljajući da nudi funkciju promene teme čak i kada perzistencija nije dostupna.

За састављење савијањих апликација, можете да размотрите додатне стратегије :

Синхронизација сервера (опцијонално)

Ovaj pristup omogućava sinhronizaciju preferenci između uređaja za prijavljene korisnike, i zadržavajući lokalnu odzivnost u stvarnom vremenu.

Ово је где магия заиста ради. Ми ћемо поставити мали скриптu linijiправо у наш`<head>`, prije svih naших oznake`<link>`стилеве. Оvaj скрипт је намишњено минималистичан, аутономан и дизајниран да се изврши као што је могуће брже.

Razložimo ovaj skript linija po liniji da razumemo svako odluku u dizajnu:

IIFE (Izraz odmah pozivane funkcije)

Ova struktura kreira funkciju koja se odmah izvršava. Zašto? Da izoljamo svoje promenljive u lokalnom opsegu i da izbegnemo zagađavanje globalnog opsegu. Čak i ako koristimo samo`const`(koji ima blok opseg), IIFE je dobra praksa koja čini naše namere jasne i zaštičuje od potencijalnih konflikata imena.

Строги режим

Ova direktiva aktivira strict mode u JavaScriptu, koji: - Забрањено коришћење недекларисаних променљивих - Generiše greške za opasne operacije - Poboljšava performanse u nekim JavaScript motorima

За критички скрипт као овај, желимо максималну безбедност.

Blok try…​catch

Ovaj blok je apsolutno ključan. On garantuje da ako se nešto pokvari (localStorage je blokiran, neprobabilna sintaksna greška, itd.), naš skript neće blokirati učitavanje cele stranice. Korišćenje`console.warn`umesto`console.error`укаже да је то неопрезив проблем.

Čitanje iz localStorage

Ova linija može baciti izuzetak u nekim kontekstima (striktno privatno pretraživanje u Safari-u). Zato je u bloku try…​catch.

Uslovna primena

Primenjujemo temu samo ako smo pronašli sačuvanu. Inače, dopuštamo CSS-u da koristi svoj podrazumevani temu. Ovaj pristup je čvrši od podrazumevane vrednosti koja je hardkodirana u JavaScriptu.

Opцiona no eleganтna nadogradnja sastoji se u detektovanjem preferenca temea operativnog sistema korisnika ako jos nije izradio eksplcitni izbor u vašoj aplikaciji :

Ова функција користи медијски упит`prefers-color-scheme`На macOS, Windows 10+, iOS i Android moderno, ovaj zahtev vraća sistemsku preferencu korisnika.

Prednosti: Prilagođeno iskustvo odmah od prve posete - Саглашеност са системским окружењем корисника - Нема потребе за складиштење за први посетак

Размотрања : - Ne svi preglednici podržavaju ovu funkcionalnost (ali podrška je odlična od 2020.) Проверка`window.matchMedia`osigurava kompatibilnost - Корисник може увек да преодоле овог избора.

Naš skript za pre-učitavanje je dizajniran da bude ekstremno brz:

Minimalna veličina: Okoliko 300 bajtova ne-minifikovanih, 200 bajtova minifikovanih. To je zanemarljivo u poređenju sa bilo kojom slikom ili JavaScript bibliotekom.

U linijiNema dodatnog HTTP zahteva. Skript se nalazi u HTML-u, pa je odmah dostupan.

Jednostavne sinkrone operacije: Čitanje ključa u localStorage (ultra brza operacija) i izmena atributa DOM (native operacija pregledača).

Nema zavisnosti: Nema frameworka, nema biblioteke, samo vanila JavaScript. Nema vremena pokretanja, nema parsanja zavisnosti.

Jedno izvršavanje: Ovaj skript se izvršava samo jednom pri učitanju. Nema slušalaca događaja, nema petlji, nema složenih izračuna.

U praksi, na modernom hardveru, ovaj skript se izvršava u manje od 1 milisekunde, vreme koje je neprimetno i nema uticaja na performanse učitavanja stranice.

Redosled elemenata u`<head>`est važno. Sledeći je preporučeni redosled:

Ova naredba garantuje da:

Bootstrap 5 je uveo elegantan sistem za upravljanje temama koji se temelji na CSS custom property-ima (CSS promenljivim) i selektorima atributa. Ovaj sistem koristi atribut`data-bs-theme`na elementu`<html>`da se odredi koji skup promenljivih boja treba primeniti

Lepota ovog sistema je u njena prostota: umesto da učitamo različite stilove ili preklapamo klase na hiljade elemenata, jednostavno menjamo jedan atribut na jedinom elementu, a CSS ostalo radi zahvaljujući kaskadi.

Evo kompletne CSS strukture za implementaciju jakog sistema tema: