L Art du Pré-chargement : Éliminer le "Flash" de Thème avec JavaScript et CSS

Sahneyi hayal edin: web uygulamanız için harika bir koyu tema tasarlamak için saatler harcadınız. Renkler mükemmel şekilde dengeli, kontrast optimal ve kullanıcılar bu seçeneği seviyor. Ancak embarrassed bir sorun var: her sayfa yenilemesi sırasında, bir saniyenin bir fraksiyonu boyunca varsayılan açık tema gösterilir, ardından koyu tema devreye girer.

Bu görsel "flash", kısa olsa da (bazen 100 milisaniyeden daha az), insan gözü tarafından hemen fark edilir ve rahatsız edici bir deneyim oluşturur. Görsel konfor veya erişilebilirlik nedeniyle karanlık tema seçen kullanıcılar için bu parlama hatta acı verici olabilir, özellikle aydınlatması az ortamlarda.

Bu fenomen, web geliştirmedeki bir klasik sorun olan "Flash of Unstyled Content" (FOUC) olarak adlandırılan şeyin bir varyantıdır; bu problem CSS’nin ilk günlerinden beri tarihini yapar. FOUC, tarayıcı HTML içeriğini geçici olarak CSS stillerinin uygulanmadığı şekilde görüntülediğinde oluşur ve bu da stilini olmayan içerikte bir flaş oluşturur.

Özel durumumuzda, tamamen stil içermeyen bir içerik hakkında konuşmuyoruz, aksine birYanlış tema flaşı(FOWT) - içerik stilize edilmiş, fakat yanlış temayla. Özellikle sinir bozucu, bunun gösterdiği ki bizim uygulamamız \"unutturuyor\" kullanıcının tercihini her sayfa yüklenmesinde.

Bu sorun teknik olsa da, uygulamanızın kalite algısında önemli etkileri yapar:

Parlaklığı eksikParlama, uygulamanın tamamlanmamış veya iyileştirilmemiş olduğu izlenimi verir. Kullanıcılar bu küçük görsel hataları genellikle genel bir profesyonellik eksikliğiyle ilişkilendirir.

Koherens bozulması: Uygulama kullanıcının tercihlerini 'unutuyormuş gibi görünüyor', bu da arayüz ve beklentiler arasında bir senkronizasyon eksikliği hissi yaratıyor.

Görsel yorgunlukIşığa hassas olan veya migrenli kullanıcılar için bu parlak ışık, sadece görsel bir rahatsızlıktan daha fazlası olabilir.

Algılanan performansIronik olarak, web siteniz hızlı yüklenese de, bu titreme yavaş veya tepkisiz gibi bir uygulama izlenimi verebilir.

Bu sorunu çözmek için, önce neden oluştuğunu anlamamız gerekir. Sayfa yaşam döngüsündeki üç kritik olay arasındaki zaman gecikmesi nedeniyle parlama oluşur :

Probleme, tarayıcı zaten #2 olayı (stilloların uygulanması) başladı veya tamamladıktan sonra #3 olayının (JavaScript çalıştırılması) gerçekleştiğinde ortaya çıkar. Bu noktada, tarayıcı hangi temayı görüntüleyeceğine ilişkin bir karar vermiş ve kodunuz, ilk oluşturma öncesi bunu etkilemek için çok geç gelmiştir.

Geliştirici için en doğal yaklaşım, bir betiği sonuna koymak olacaktı`<body>`Kullanıcının tercih ettiği temayı kontrol eder ve uygular. Bu yaklaşım, renderı engellemek yerine sayfanın sonundaki skriptlerin yüklenmesini tavsiye eden geleneksel web en iyi uygulamalarını takip eder.

Bu yaklaşım ilk bakışta mantıklı görünüyor. DOM hazır olmasını bekliyoruz, ardından temayı uyguluyoruz. Basit, değil mi? Özellikle bu basitlik, tarayıcının render döngüsü zamanlamasıyla ilgili temel bir hatayı gizliyor.

Etkinlik`DOMContentLoaded`başlangıç HTML belgesi tarayıcı tarafından tamamen yüklendi ve analiz edildiğinde tetiklenir,beklemedenStillerin, görsellerin ve alt çerçeveilerin yüklenmesinin sonu. Bu anlaşılması gereken önemli bir noktadır.

İşte tipik olay sırası:

Sorun? Etap 6 (DOMContentLoaded) ve etap 8 (ilk paint) arasında, tarayıcı sayfa nasıl gösterileceği konusunda zaten kararlara varmıştır. Temanızı değiştiren betiğiniz etap 6’da çalışıyorsa, varsayılan stillerle ilk görünümü önlemek için artık geç kalmıştır.

Gerçekte, zamanlama çok daha karmaşıktır. Modern tarayıcılar, algılanan performansı iyileştirmek için karmaşık optimizasyon teknikleri kullanırlar. İlk içerikli boyamı (First Contentful Paint) mümkün olduğunca hızlı yapmaya çalışırlar, böylece kullanıcı ekranda bir şey görür.

CSS’ler varsayılan olarak "render-blocking" olup, bu da tarayıcının ilk boyama işlemini yapmadan önce stil sayfalarını indirip çözümlemesini beklediği anlamına gelir. Bu mantıklı: stillenmemiş içerik göstermek istemiyoruz.

İşte tuzak budur: tarayıcı bu CSS stillerini ilk kez uyguladığında, onu mevcut DOM durumu üzerinden yapar. Eğer öznitelik`data-bs-theme`Henüz etiket üzerinde tanımlanmamış`<html>`, tarayıcı varsayılan stili uygulayacak (genellikle açık tema)

Ardından, komut dosyanız yürütülür ve bu özniteliği değiştirdiğinde tarayıcı bunu yapmalıdır:

Bu yeniden hesaplama ve yeniden boyama süreci, gözle görülen yanıltmaya sebep olur.

Daha iyi anlamak için bu sorunlu diziyi detaylı bir dizi diyagramı inceleyelim:

Bu diyagram sorunu net bir şekilde gösterir: ilk Paint, komut dosyamızın doğru temayı ayarlama şansına sahip olmadan önce gerçekleşir. Ardından gelen Repaint, görünür sallanmayı (fliker) yaratıyor.

Bu sorunu çözmek için farklı yaklaşımlar denenmiş olsa da, çoğunun kendi dezavantajları vardır:

Yaklaşım 1: İçeriği yüklenene kadar gizleme

Bu yaklaşım, JavaScript doğru temayı belirleene kadar tüm içeriği gizler. Sorun? Bu, içeriğin görüntülenmesini yapay olarak geciktirir, bu da sitesin daha yavaş olduğunu hissettirir. Ayrıca, JavaScript devre dışı bırakılırsa, kullanıcı hiçbir şey göremez!

Yaklaşım 2: Bir loader/spinner kullanın.

Yaklaşım 1’e benzer, ancak bir yükleme göstergesiyle. Sorunu maskeler, gerçek performansı iyileştirmez ve gereksiz algılanan bir gecikme ekler.

Yaklaşım 3 : Koyu temaya varsayılan

Bazı geliştiriciler CSS’te karanlık temayı varsayılan olarak tanımlarlar. Bu, karanlık tema kullanıcıları için parlamayı önler, ama açık tema kullanıcıları için parlamaya yol açar!

Bu yaklaşımlardan hiçbiri memnuniyet verici değildir çünkü sorunun kök nedenini değil belirtileri ele alıyorlar.

Bu sorunu çözmek için, özniteliği tanımlamamız gerektiğini fark etmek gerekir.data-bs-theme öncetarayıcı CSS stillerini uygulamaya başlamadığı zaman. Bu, betiğimizin sayfa yaşam döngüsünün daha erken bir aşamasında çalıştırılması gerektiği anlamına gelir ve bu, sonraki bölümde inceleyeceğimiz şey.

Titleşme sorunumuz için şık çözüm, basit ama güçlü bir prensibe dayanır:uygulama durumunu tarayıcının işleme süreciyle senkronize etmek. Sayfa yüklendiğinde temayı belirlemek için beklemek yerine, temayı belirlemeliyiz.sırasındaYükleme aşamasında, hatta CSS stillerleri uygulanmadan önce.

Bu yaklaşım web geliştirme jargonu içinde 'Early Loading' veya 'Synchronous Preloading' olarak adlandırılır. Fikir, tema algılama mantığını sayfa yaşam döngüsünde mümkün olduğunca erken, idealde bir etiket içinde çalıştırmaktır`<head>`, tarayıcı CSS dosyalarını indirmeye başlamadan önce.

Le `<head>`Bir HTML belgesi tarayıcı tarafından üstten alta sırayla işlenir. Her öğe göründüğü sırayla işlenir. Bu özellik çözümümüz için критиktir.

Tarayıcı bir etiketle karşılaştığında`<script>`içindeki`<head>`özellikler olmadan`async` ou defer, il :

Bu davranış, genellikle bir performans sorunu olarak kabul edilir (bu da sayfanın sonuna script yerleştirilmesi tavsiyesine yol açar), bu özel durumda bizim müttefik olur. Tema algılama scriptimizi başına yerleştirmek`<head>`, garanti ederiz ki tarayıcı etiketlerle karşılaşmadan önce çalışır`<link>`stil sayfalarımızın.

Tam çözümümüz, birbirine bağlı üç katmandan oluşur, her biri belirli bir rol oynar:

Katman 1 : Kalıcılık (localStorage) Bu katman, oturumlar arasındaki kullanıcı tercihinin kaydedilmesi ve alınması sorumluluğunu üstlenir.

Katman 2 : Erken Senkronizasyon (İnline script <head> içinde) Bu katman, uygulamadaki durumu ilk render öncesinde DOM ile senkronize eder.

Katman 3 : Reaktif Stiller (CSS ile özellik seçicileri) Bu katman, katman 2 tarafından tanımlanan duruma göre görsel stillerini tanımlar.

Şimdi her katmanı detaylı olarak inceleyelim.

Le localStorage`Bir Web Storage API’si, tarayıcıda kalıcı olarak anahtar-değer çiftlerini depolamaya izin verir. Çerezlerden farklı olarak, veriler`localStorage: (Note: There was no actual text provided for translation.)

Kullanım örneği için, le`localStorage`mükemmel çünkü :

İşte kullanıcının temayı değiştirdiğinde seçimini nasıl kaydederiz:

Bu tür durumları yönetmek çok önemlidir`localStorage`Mevcut değil veya erişilemez. Birden fazla senaryo, erişimi engelleyebilir`localStorage`:

Katı özel gezinmeSafari özel gezinti modunda bir istisna fırlatır`QuotaExceededError`yazma denemeleri sırasında içinde`localStorage`.

Gizlilik AyarlarıBazı tarayıcılar veya gizlilik uzantıları erişimi engelleyebilir`localStorage`.

Alan sınırlamaları : Le `localStorage`Protokol üzerinden erişilemez`file://`bazı tarayıcılarda

Depolama alanı doluNadir bir ihtimal olsa da, depolama alanı tamamen doldurulabilir.

Bu yüzden kodumuz bir blok kullanır`try…​catch`Bu durumları zarif bir şekilde yönetmek, temayı değiştirme işlevini hâlâ sunmaya devam etmek; hatta kalıcılık kullanılamadığında bile.

Daha ileri seviye uygulamalar için ek stratejileri değerlendirebilirsiniz:

Sunucu senkronizasyonu (opsiyonel)

Bu yaklaşım, oturum açmış kullanıcılar için cihazlar arasında tercihleri senkronize etmeyi mümkün kılar, aynı zamanda anlık yerel duyarlılığı korur.

Burada sihir gerçekten çalışır. Küçük bir script ekleyeceğiz.satır içidoğrudan bizim`<head>`, Tüm etiketlerimizden önce`<link>`stil sayfaları. Bu betik niyetle minimalistiktir, bağımsızdır ve mümkün olduğunca hızlı çalışacak şekilde tasarlanmıştır.

Scripti satır satır inceleyerek her tasarım kararını anlayalım :

IIFE (Anında Çağrılan Fonksiyon İfadesi)

Bu yapı, hemen çalıştırılan bir fonksiyon oluşturur. Neden ? Değişkenlerimizi yerel bir kapsamda izole etmek ve küresel kapsamı kirletmekten kaçınmak için. Ancak sadece kullanıyor olsak da`const`(blok kapsamına sahip) IIFE iyi bir uygulamadır, niyetlerimizi açık kılan ve olası isim çatışmalarına karşı korar.

Katı Mod

Bu yönerge JavaScript’in strict modunu etkinleştirir, bu : - Bildirilmemiş değişkenlerin kullanımı yasaktır. - Tehlikeli işlemler için hatalar üretir - JavaScript bazı motorlarında performansı artırır

Bu gibi kritik bir betik için maksimum güvenlik istiyoruz.

try…​catch bloğu

Bu blok mutlaka çok önemli. Bir şey ters giderse (localStorage engellendi, muhtemelen olmayan sözdizimi hatası vb.), betiğimizin sayfanın tam yüklenmesini engellemesini önler. Kullanım`console.warn`olmaktan ziyade`console.error`Kritik olmayan bir sorun olduğunu gösterir.

localStorage okuması

Bu satır bazı bağlamlarda bir istisna fırlatabilir (Safari’nin sert gizli tarama). Bu yüzden bir try…​catch bloğunda bulunur.

Koşullu Uygulama

Bir kayıtlı tema bulduğunda onu uyguluyoruz; bulamadığımızda CSS’in varsayılan temasını kullanmasına izin veriyoruz. Bu yaklaşım, JavaScript’te sabitlenmiş bir varsayılan değere kıyasla daha sağlamdır.

Opsiyonel ve şık bir iyileştirme, kullanıcı işletim sistemi teması tercihini hâlâ yapmamışsa onu tespit etmektir:

Bu özellik Media Query kullanır.`prefers-color-scheme`Sistemi sorgulamak için. macOS, Windows 10+, iOS ve modern Android üzerinde, bu sorgu kullanıcının sistem tercihini döndürür.

Avantajlar: İlk ziyaretten itibaren kişiselleştirilmiş deneyim - Kullanıcının sistem ortamı ile tutarlılık İlk ziyaret için depolama gerekli değildir.

Dikkate Alınması Gereken Hususlar : - Tüm tarayıcılar bu özelliği desteklemez (ama destek 2020’tan beri mükemmeldir) - Doğrulama`window.matchMedia`Uyumluluğu sağlar - Kullanıcı her zaman bu seçimi geçersiz kılabilir

Ön yükleme betiğimiz, çok hızlı olacak şekilde tasarlanmıştır :

Minimum boyut: Yaklaşık 300 bayt sıkıştırılmamış, 200 bayt sıkıştırılmış. Bu, herhangi bir resim ya da JavaScript kütüphanesiyle karşılaştırıldığında önemsizdir.

Satır içiEkstra bir HTTP isteği yok. Script HTML içinde olduğundan hemen kullanılabilir.

Basit senkron işlemler: localStorage’da bir anahtar okuma (ultra hızlı işlem) ve bir DOM niteliği değiştirme (tarayıcı yerel işlemi).

Bağımlılık yokFramework yok, kütüphane yok, sadece vanilya JavaScript. Başlatma süresi yok, bağımlılık ayrıştırımı yok.

Tek yürütmeBu betik yüklenirken sadece bir kez çalışır. Olay dinleyicisi yok, döngü yok, karmaşık hesaplama yok.

Uygulamada, modern donanımda bu betik 1 milisaniyeden az bir sürede çalışır, sayfa yükleme performansını etkilemeyecek kadar kısa ve algılanamaz bir süre.

Elemanların sırası içinde`<head>`önemlidir. İşte önerilen sıralama :

Bu düzen garanti eder ki:

Bootstrap 5, CSS özel özellikleri (CSS değişkenleri) ve öznitelik seçicileri üzerine dayalı zarif bir tema yönetim sistemi tanıttı. Bu sistem niteliğini kullanır.data-bs-theme`öğe üzerine<html>`renk değişkenleri kümesinin hangisinin uygulanacağını belirlemek için

Bu sistemin güzelliği, basitliğindeki yatar: Farklı stil sayfaları yüklemek veya binlerce öğe üzerinde sınıfları aç/kapatmak yerine, sadece tek bir öğedeki bir özniteliği değiştiririz ve CSS kalanı kaskat sistemi sayesinde haleder.

Güçlü bir tema sistemi uygulamak için tam bir CSS yapısı aşağıda verilmıştır: