Seni Pra-muatan: Menghilangkan 'Flash' Tema dengan JavaScript dan CSS

Bayangkan adegan ini: Anda telah menghabiskan jam-jam untuk merancang tema gelap yang indah untuk aplikasi web Anda. Warna-warna seimbang sempurna, kontras optimal, dan pengguna Anda menyukai opsi ini. Tapi ada masalah memalukan: setiap kali halaman dimuat ulang, dalam sekejap, tema terang default muncul sebelum tema gelap menggantikannya.

Flash visual ini, meskipun singkat (kadang kurang dari 100ms), langsung terasa oleh mata manusia dan menciptakan pengalaman yang tidak menyenangkan. Untuk pengguna yang telah memilih tema gelap karena alasan kenyamanan visual atau aksesibilitas, kedipan ini bahkan dapat menyakitkan, terutama dalam lingkungan yang tidak terang.

Fenomena ini adalah varian dari yang disebut "Flash of Unstyled Content" (FOUC), sebuah masalah klasik dalam pengembangan web yang bermula sejak awal era CSS. FOUC terjadi ketika peramban menampilkan sementara konten HTML tanpa gaya CSS yang diterapkan, menciptakan kilat konten yang tidak terdahului.

Dalam kasus spesifik kita, kita tidak berbicara tentang konten yang tidak diberi gaya sepenuhnya, melainkan tentang sebuahKilat tema salah(FOWT) - Konten tersebut telah diberi gaya, tetapi dengan tema yang salah. Ini sangat menyebalkan karena ini menunjukkan bahwa aplikasi kita "melupakan" preferensi pengguna setiap kali halaman dimuat.

Masalah ini, meskipun bersifat teknis, memiliki dampak yang signifikan terhadap persepsi kualitas aplikasi Anda :

Kurang halus: Kedipan memberi kesan bahwa aplikasi belum selesai atau tidak dioptimalkan dengan baik. Pengguna sering mengaitkan cacat visual kecil ini dengan kurangnya profesionalisme secara keseluruhan.

Kehilangan koherensiAplikasi sepertinya "melupakan" preferensi pengguna, menciptakan perasaan tidak sinkron antara antarmuka dan harapan.

Kelelahan visualUntuk pengguna yang sensitif terhadap cahaya atau yang mengalami migrain, cahaya kilat ini bisa menjadi lebih dari sekadar gangguan estetika.

Kinerja yang dirasakanIronis, meski situs Anda dimuat dengan cepat, ketipukan ini dapat memberi kesan aplikasi lambat atau kurang responsif.

Untuk memahami cara menyelesaikan masalah ini, pertama-tama perlu memahami mengapa hal tersebut terjadi. Kedipan terjadi karena adanya keterlambatan waktu antara tiga peristiwa kritikal dalam siklus hidup sebuah halaman web :

Masalah terjadi ketika peristiwa no.3 (eksekusi JavaScript) tiba setelah browser sudah memulai atau menyelesaikan peristiwa no.2 (penerapan gaya). Saat itu, browser sudah membuat keputusan tentang tema mana yang akan ditampilkan, dan kode Anda terlambat untuk memengaruhinya sebelum rendering pertama.

Pendekatan paling natural untuk seorang pengembang akan menempatkan skrip di akhir dari kita.`<body>`yang memeriksa tema favorit pengguna dan menerapkannya. Pendekatan ini mengikuti praktik terbaik tradisional web yang merekomendasikan untuk memuat skrip di akhir halaman agar tidak memblokir rendering.

Pendekatan ini tampak logis pada pandangan pertama. Kami menunggu hingga DOM siap, lalu kami menerapkan tema. Sederhana, bukan? Sayangnya, kesederhanaan ini menyembunyikan cacat fundamental yang terkait dengan timing siklus rendering peramban.

Kejadian`DOMContentLoaded`terpicu ketika dokumen HTML awal telah sepenuhnya dimuat dan dianalisis oleh peramban,tanpa menungguakhir pemuatan stylesheets, gambar, dan subframe. Ini adalah poin penting untuk dipahami.

Berikut adalah urutan tipikal peristiwa:

Masalah? Di antara langkah 6 (DOMContentLoaded) dan langkah 8 (paint pertama), peramban telah membuat keputusan tentang cara menampilkan halaman. Jika skrip perubahan tema Anda berjalan di langkah 6, sudah terlambat untuk menghindari tampilan pertama dengan gaya default.

Sebenarnya, timing-nya masih lebih kompleks. Penyelancar modern menggunakan teknik optimisasi yang canggih untuk meningkatkan performa yang dirasakan. Mereka mencoba membuat first paint (First Contentful Paint) secepat mungkin agar pengguna melihat sesuatu di layar.

CSS secara default bersifat "render-blocking", artinya browser menunggu sampai stylesheet terunduh dan diparse sebelum melakukan first paint. Itu masuk akal: kita tidak ingin menampilkan konten yang belum diberi gaya.

Tapi ini adalah jebakannya: ketika peramban menerapkan gaya CSS ini untuk pertama kalinya, ia melakukannya berdasarkan keadaan saat ini dari DOM. Jika atribut`data-bs-theme`belum didefinisikan pada tag`<html>`, perambar akan menerapkan gaya default (biasanya tema terang).

Kemudian, ketika skrip Anda berjalan dan mengubah atribut ini, peramban harus:

Proses penghitungan ulang dan penarikan ulang ini yang menyebabkan kedipan yang terlihat.

Untuk lebih memahami urutan masalah ini, mari kita periksa diagram urutan terperinci:

Diagram ini menggambarkan dengan jelas masalahnya: pertama kali paint terjadi sebelum skrip kami berempatan untuk menentukan tema yang tepat. Repaint yang kemudian menghasilkan berkedip yang terlihat.

Berbagai pendekatan telah dicoba untuk menyelesaikan masalah ini, tetapi kebanyakan memiliki kelemahan masing-masing :

Pendekatan 1: Menyembunyikan konten sampai pemuatan selesai

Pendekatan ini menyembunyikan semua konten sampai JavaScript menentukan tema yang tepat. Masalah? Ini menunda secara buatan penampilan konten, memberi kesan situs lebih lambat. Selain itu, jika JavaScript dinonaktifkan, pengguna tidak akan melihat apa-apa sama sekali!

Pendekatan 2 : Menggunakan loader/spinner

Serupa dengan pendekatan 1, tetapi dengan spinner pemuat. Ini menyembunyikan masalah tetapi tidak meningkatkan performa aktual dan menambahkan penundaan yang dirasa tidak perlu.

Pendekatan 3 : Default ke tema gelap

Beberapa developer mengatur tema gelap sebagai default dalam CSS. Ini mencegah kedipan bagi pengguna tema gelap, tetapi menciptakan masalah yang berlawanan bagi pengguna tema terang!

Tidak ada pendekatan ini yang memuaskan karena mereka mengatasi gejala alih-alih akar masalah.

Kunci untuk menyelesaikan masalah ini adalah menyadari bahwa kita harus menentukan atribut`data-bs-theme` sebelumbahwa peramban belum mulai menerapkan gaya CSS. Ini berarti bahwa skrip kami harus dieksekusi lebih awal dalam siklus hidup halaman, dan ini persis apa yang akan kita jelajahi di bagian berikutnya.

Solusi elegan untuk masalah berkedip kita didasarkan pada prinsip yang sederhana tetapi kuat:Mengsinkronkan status aplikasi dengan proses rendering peramban. Sebagai gantinya menunggu hingga halaman dimuat untuk menentukan tema, kita harus menetapkannyasaatpemuatan, bahkan sebelum gaya CSS diterapkan.

Pendekatan ini disebut "Early Loading" atau "Synchronous Preloading" dalam jargon pengembangan web. Ideanya adalah menjalankan logika deteksi tema kita secepat mungkin dalam siklus hidup halaman, idealnya dalam tag`<head>`, bahkan sebelum peramban mulai mengunduh file CSS.

Le `<head>`Sebuah elemen dari dokumen HTML diproses secara berurutan oleh peramban, dari atas ke bawah. Setiap elemen diproses dalam urutan tempat ia muncul. Karakteristik ini krusial untuk solusi kita.

Ketika peramban menemui sebuah tag`<script>`dalam`<head>`tanpa atribut-atribut`async` ou defer, il :

Perilaku ini, yang sering dianggap sebagai masalah performa (sebab itu rekomendasi biasa adalah meletakkan script di akhir halaman), menjadi sekutu kita dalam kasus spesifik ini. Dengan menempatkan script deteksi tema kita di awal du`<head>`, kami menjamin bahwa dieksekusi sebelum browser bertemu dengan tag`<link>`dari lembar gaya kami.

Solusi lengkap kami terdiri dari tiga lapisan yang saling terkait, masing-masing berperan secara spesifik :

Lapisan 1 : Persistensi (localStorage) Lapisan ini bertanggung jawab atas penyimpanan dan pemulihan pilihan pengguna antar sesi

Lapisan 2 : Sinkronisasi Dini (script inline dalam <head>) Lapisan ini mensinkronkan keadaan aplikasi dengan DOM sebelum rendering awal

Lapisan 3 : Gaya Responsif (CSS dengan selektor atribut) Lapisan ini menentukan gaya visual berdasarkan keadaan yang ditentukan oleh lapisan 2.

Mari kita jelajahi setiap lapisan secara detail sekarang

Le localStorage`adalah API Web Storage yang memungkinkan penyimpanan pasangan kunci-nilai dalam browser secara persisten. Berbeda dengan cookies, data`localStorage:

Untuk kasus penggunaan kita, yang`localStorage`adalah sempurna karena :

Berikut cara kami menyimpan pilihan pengguna saat ia mengubah tema :

Penting untuk mengelola kasus di mana`localStorage`Tidak tersedia atau tidak dapat diakses. Beberapa skenario dapat mencegah akses ke`localStorage` :

Navigasi pribadi ketatSafari dalam mode penelusuran pribadi menimbulkan pengecualian`QuotaExceededError`saat percobaan menulis dalam`localStorage`.

Pengaturan privasi: Beberapa peramban atau ekstensi privasi dapat memblokir akses ke`localStorage`.

Keterbatasan domain : Le `localStorage`tidak dapat diakses pada protokol`file://`di beberapa peramban.

Ruang penyimpanan penuhMeskipun jarang, ruang penyimpanan dapat sepenuhnya terisi.

Karena itu kode kita menggunakan sebuah blok`try…​catch`Untuk menangani kasus-kasus ini dengan anggun, sambil terus menawarkan fungsionalitas perubahan tema meskipun persistensi tidak tersedia.

Untuk aplikasi yang lebih canggih, Anda dapat mempertimbangkan strategi tambahan:

Sinkronisasi server (opsional)

Pendekatan ini memungkinkan sinkronisasi preferensi antar perangkat untuk pengguna yang terhubung, sambil tetap menjaga responsivitas lokal yang langsung.

Ini adalah tempat di mana sihir tersebut benar-benar berfungsi. Kami akan menempatkan sebuah skrip kecil.secara langsunglangsung di dalam kita`<head>`, sebelum semua tag kami`<link>`de lembar gaya. Skrip ini sengaja dibuat minimalis, mandiri, dan dirancang untuk berjalan secepat mungkin.

Mari kita pecah skrip ini baris demi baris untuk memahami setiap keputusan desain:

IIFE (fungsi yang segera dipanggil)

Struktur ini membuat sebuah fungsi yang dieksekusi segera. Mengapa? Untuk mengisolasi variabel kita dalam cakupan lokal dan menghindari pencemaran cakupan global. Meskipun kita hanya menggunakan`const`(yang memiliki scope blok), IIFE adalah praktik yang baik yang membuat niat kita jelas dan melindungi dari konflik nama yang mungkin.

Mode Ketat

Directive ini mengaktifkan mode ketat JavaScript, yang : - Melarang penggunaan variabel yang tidak dideklarasikan - Menghasilkan kesalahan untuk operasi berbahaya - Meningkatkan performa di beberapa mesin JavaScript

Untuk skrip kritis seperti ini, kami ingin keamanan maksimal.

Blok try…​catch

Blok ini sangat penting. Ia menjamin bahwa jika terjadi sesuatu yang salah (localStorage terblokir, kesalahan sintaks improbable, dsb.), skrip kita tidak akan menghambat pemuatan seluruh halaman. Penggunaan`console.warn`daripada`console.error`mengindikasikan bahwa ini bukan masalah kritis

Pembacaan localStorage

Baris ini dapat menimbulkan pengecualian dalam beberapa konteks (privatisasi Safari yang ketat). Itu sebabnya ia berada dalam blok try…​catch.

Aplikasi bersyarat

Kami menerapkan tema hanya jika kami menemukan tema yang telah disimpan. Jika tidak, kita membiarkan CSS menggunakan tema default-nya. Pendekatan ini lebih robust daripada nilai default yang di-hardcode dalam JavaScript.

Penambahan yang opsional namun elegan adalah mendeteksi preferensi tema sistem operasi pengguna jika mereka belum membuat pilihan eksplisit dalam aplikasi Anda :

Fitur ini menggunakan Media Query`prefers-color-scheme`untuk menanyakan sistem. Pada macOS, Windows 10+, iOS, dan Android modern, permintaan ini mengembalikan preferensi sistem pengguna.

Keuntungan : - Pengalaman yang dipersonalisasi sejak pertama kali berkunjung - Konsistensi dengan lingkungan sistem pengguna - Tidak perlu penyimpanan untuk kunjungan pertama

Pertimbangan: - Tidak semua browser mendukung fitur ini (tapi dukungannya sangat baik sejak 2020) - Verifikasi`window.matchMedia`memastikan kompatibilitas - Pengguna selalu dapat mengganti pilihan ini

Skrip pre-load kami dirancang untuk sangat cepat:

Ukuran minimumKira-kira 300 byte yang tidak dipersempit, 200 byte yang dipersempit. Itu dianggap tidak signifikan dibandingkan dengan gambar atau pustaka JavaScript apa pun.

secara langsungTidak ada permintaan HTTP tambahan. Skrip ada di dalam HTML, sehingga ia langsung tersedia.

Operasi sinkron sederhana: Membaca sebuah kunci dalam localStorage (operasi sangat cepat) dan modifikasi sebuah atribut DOM (operasi bawaan peramban).

Tidak ada ketergantungan: Tidak ada framework, tidak ada perpustakaan, hanya JavaScript vanilla. Tidak ada waktu pemuatan, tidak ada parsing dependensi.

Eksekusi tunggal: Skrip ini dijalankan hanya sekali saat dimuat. Tidak ada listener peristiwa, tidak ada perulangan, tidak ada perhitungan kompleks.

Dalam praktiknya, pada perangkat modern, skrip ini berjalan dalam kurang dari 1 milidetik, waktu yang tidak terasa yang tidak memiliki dampak apa pun pada kinerja pemuatan halaman.

Urutan elemen di dalam`<head>`penting. Berikut urutan yang disarankan :

Perintah ini memastikan bahwa :

Bootstrap 5 telah memperkenalkan sistem tema yang elegan berbasis custom properties CSS (variabel CSS) dan selector atribut. Sistem ini menggunakan atribut`data-bs-theme`pada elemen`<html>`untuk menentukan kumpulan variabel warna yang akan diterapkan.

Keindahan sistem ini terletak pada kesederhanaannya: alih-alih memuat berbagai stylesheet atau mengalihkan kelas pada ribuan elemen, kita hanya mengubah satu atribut pada satu elemen, dan CSS melakukan sisa dengan menggunakan kaskad.

Berikut adalah struktur CSS lengkap untuk mengimplementasikan sistem tema yang kuat :