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

Φανταστείτε τη σκηνή: Έχετε δώσει ώρες για τη σχεδίαση ενός υπέροχου σκούρο θέματος για την εφαρμογή σας στο διαδίκτυο. Τα χρώματα είναι απόλυτα ισορροπημένα, η αντίθεση είναι βέλτιστη, και οι χρήστες σας αγαπούν αυτή τη δυνατότητα. Ένα αισχυντικό πρόβλημα: κάθε φορά που φορτώνεται ξανά η σελίδα, για μια μικρή στιγμή, το προεπιλεγμένο φωτεινό θέμα εμφανίζεται πριν το σκοτεινό θέμα παίρνει τη θέση του.

Αυτό το 'flash' οπτικό, παρόλο που είναι σύντομο (συχνά λιγότερο από 100ms), είναι άμεσα αντιληπτό από το ανθρώπινο μάτι και δημιουργεί μια άνεστη εμπειρία. Για τους χρήστες που επέλεξαν το σκούρο θέμα για λόγους οπτικής ευκολίας ή προσβασιμότητας, αυτό το lampeυμα μπορεί να είναι βολικό, ειδικά σε ένα χαμηλά φωτισμένο περιβάλλον.

Αυτό το φαινόμενο είναι μια παραλλαγή του λεγόμενου "Flash of Unstyled Content" (FOUC), ένα κλασικό πρόβλημα της ανάπτυξης ιστού που mająι τις ρίζες τους στα πρώτα χρόνια του CSS. Το FOUC εμφανίζεται όταν ο φυλλοτρέπτης εμφανίζει προσωρινά περιεχόμενο HTML χωρίς να έχουν εφαρμογεί τα CSS του, δημιουργώντας μια σάλη του μη στυλισμένου περιεχομένου.

Στο συγκεκριμένο μας σενάριο, δεν μιλάμε για ένα πλήρως μη στυλοποιημένο περιεχόμενο, αλλά για έναΦλας του λάθους θέματος(FOWT) - το περιεχόμενο είναι στυλό, αλλά με το λάθος θέμα. Είναι ιδιαίτερα ενοχλητικό επειδή δείχνει ότι η εφαρμογή μας "ξεχάσει" την προτίμηση του χρήστη σε κάθε φόρτωση σελίδας.

Αυτό το πρόβλημα, αν και τεχνικό, έχει σημαντικές επιπτώσεις στην αντίληψη της ποιότητας της εφαρμογής σας:

Έλλειψη λάμψης: Το ανάμψι δίνει την εντύπωση μιας μη ολοκληρωμένης ή κακώς βελτιστοποιημένης εφαρμογής. Οι χρήστες συνήθως συνδέουν αυτές τις μικρές οπτικές αδυναμίες με ένα γενικό έλλειμα επαγγελματισμού.

διακοπή συνέπειαςΗ εφαρμογή φαίνεται να "ξεχνά" τις προτιμήσεις του χρήστη, δημιουργώντας αίσθηση ανασυγκρότησης μεταξύ του περιβάλλοντος και των προσδοκιών.

Οπτική κόπωσηΓια τους χρήστες που είναι ευαίσθητοι στο φως ή παiscono από μιγρενιές, αυτή η αστραπιά φωτός μπορεί να είναι περισσότερο απλά ένα αισθητικό ανόνημα.

απόδοση που αντιλαμβάνεταιΙροντικά, ακόμα κι αν το site σας φορτώνεται γρήγορα, το ανάβασμα μπορεί να δημιουργήσει την εντύπωση μιας αργής ή ανταποκρινόμενης εφαρμογής.

Για να καταλάβεις πώς να λύσεις αυτό το πρόβλημα, πρέπει πρώτα να καταλάβεις γιατί προκύπτει. Το να αναπνέω εμφανίζεται λόγω μιας χρονικής διαφοράς μεταξύ τριών κρίσιμων γεγονότων στον κύκλο ζωής μιας ιστοσελίδας :

Το πρόβλημα εμφανίζεται όταν το γεγονός 3 (εκτέλεση JavaScript) εμφανίζεται μετά από το πρόγραμμα περιήγησης που έχει ήδη ξεκινήσει ή τελειώσει το γεγονός 2 (εφαρμογή στυλ). Στον τότε χρόνο, το πρόγραμμα περιήγησης έχει πάρει μια απόφαση για ποιο θέμα θα εμφανιστεί, και ο κώδικάς σας έρχεται αργά ώστε να δεν μπορεί να τον επηρεάσει πριν από την πρώτη απόδοση.

Η πιο φυσική προσέγγιση για έναν προγραμματιστή θα ήταν να τοποθετήσει ένα script στο τέλος του`<body>`ελέγχει το προτιμάμενο θέμα του χρήστη και το εφαρμόζει. Αυτή η προσέγγιση ακολουθεί τις παραδοσιακές καλύτερες πρακτικές του ιστού που συνιστάνουν τη φόρτωση των σεναρίων στο τέλος της σελίδας ώστε να μην εμποδίζει την εμφάνιση.

Αυτή η προσέγγιση φαίνεται λογική στην πρώτη ματιά. Περιμένουμε το DOM να είναι έτοιμο, μετά εφαρμόζουμε το θέμα. Απλό, ναι; Δυστυχώς, αυτή η απλότητα κρύβει ένα θεμελιώδες λάθος που σχετίζεται με το χρόνο του κύκλου απόδοσης του περιηγητή.

Το γεγονός`DOMContentLoaded`ενεργοποιείται όταν το αρχικό εγγράφο HTML έχει φορτωθεί πλήρως και αναλυθεί από τον περιηγητή,χωρίς αναμονήτο terminus της φόρτωσης των φύλλων στυλ, των εικόνων και των υποπλαίσίων. Είναι ένα σημαντικό σημείο για να κατανοήσεις.

Αυτό είναι η τυπική ακολουθία γεγονότων :

Το πρόβλημα; Ανάμεσα στο βήμα 6 (DOMContentLoaded) και το βήμα 8 (πρώτο paint), ο φυλλομετρητής έχει ήδη πάρει αποφάσεις για πώς να εμφανίσει τη σελίδα. Αν το σενάριο αλλαγής θέματος σας εκτελείται στο βήμα 6, είναι ήδη πολύ αργά για να αποφύγετε μια αρχική εμφάνιση με τα προεπιλεγμένα στυλ.

Στη πραγματικότητα, ο χρόνος είναι ακόμη πιο περίπλοκος. Τα σύγχρονα προγράμματα περιήγησης χρησιμοποιούν προηγμένες τεχνικές βελτιστοποίησης για να βελτιώσουν την αντιληπτή απόδοση. Προσπαθούν να κάνουν το πρώτο paint (First Contentful Paint) όσο πιο γρήγορα είναι δυνατόν ώστε ο χρήστης να δει κάτι στην οθόνη.

Τα CSS είναι "render-blocking" από προεπιλογή, το οποίο σημαίνει ότι ο περιηγητής περιμένει να κατεβάσει και να αναλύσει τα φύλλα στυλ πριν κάνει το πρώτο paint. Είναι λογικό: δεν θέλουμε να εμφανίζουμε μη στυλισμένο περιεχόμενο.

Αλλά εδώ είναι η παγίδα: όταν ο φυλλομετρητής εφαρμόζει αυτά τα CSS στυλ για πρώτη φορά, το κάνει βασισμένος στην τρέχουσα κατάσταση του DOM. Αν το χαρακτηριστικό`data-bs-theme`Δεν είναι ακόμα ορισμένο στην ετικέτα`<html>`, ο περιηγητής θα εφαρμόσει τα προεπιλεγμένα στijl (συνήθως το φωτεινό θέμα).

Επειδή, όταν το script σας εκτελείται και αλλάζει αυτό το attribute, ο φυλλομετρητής πρέπει :

Αυτή η διαδικασία επανυπολογισμού και επαναρυμάνισης είναι αυτή που προκαλεί το ορατό διασπορά.

Για να κατανοήσουμε καλύτερα αυτή τη προβληματική ακολουθία, ας εξετάσουμε ένα λεπτομερές διάγραμμα ακολουθίας:

Αυτό το διάγραμμα δείχνει σαφώς το πρόβλημα: το πρώτο paint εμφανίζεται πριν το script μας να έχει την ευκαιρία να ορίσει το σωστό θέμα. Ο επόμενος repaint δημιουργεί το ορατό αναλουλό.

Πολλές προσεγγίσεις έχουν δοκιμαστεί για να λύσουν αυτό το πρόβλημα, αλλά οι περισσότερες έχουν τα δικά τους μειονεκτήματα:

Προσέγγιση 1: Αποκρύβει το περιεχόμενο μέχρι την φόρτωση

Αυτή η προσέγγιση κρύβει όλο το περιεχόμενο μέχρι να ορίσει το JavaScript το σωστό θέμα. Το πρόβλημα; Αυτό καθυστερεί τεχνητά την εμφάνιση του περιεχομένου, δημιουργώντας την εντύπωση ενός πιο αργού site. Επιπλέον, αν το JavaScript είναι απενεργοποιημένο, ο χρήστης δεν βλέπτει καθόλου τίποτα!

Μέθοδος 2: Χρησιμοποιήστε ένα loader/spinner

Παρόμοια με την προσέγγιση 1, αλλά με ένα spinner φόρτωσης. Αυτό κρύβει το πρόβλημα, αλλά δεν βελτιώνει την πραγματική απόδοση και προσθέτει άχρηστο αντιληπτό καθυστέρηση.

Προσέγγιση 3: Προεπιλογή σε σκούρο θέμα

Ορισμένοι προγραμματιστές ορίζουν το σκοτεινό θέμα ως προεπιλογή στο CSS. Αυτό αποφεύγει το αναμπτύξιμο για τους χρήστες του σκοτεινού θέματος, αλλά δημιουργεί το αντίθετο πρόβλημα για τους χρήστες του φωτεινού θέματος !

Κανένας από αυτές τις προσεγγίσεις δεν είναι ικανοποιητικός, επειδή αντιμετωπίζουν το συμπτώμα αντί της ρίζας του προβλήματος.

Η κλειδί για την επίλυση αυτού του προβλήματος είναι να καταλάβουμε ότι πρέπει να ορίσουμε το χαρακτηριστικό`data-bs-theme` πρινότι ο φυλλομετρητής δεν αρχίζει να εφαρμόζει τα CSS στυλ. Αυτό σημαίνει ότι το σενάριο μας πρέπει να εκτελεστεί νωρίτερα στον κύκλο ζωής της σελίδας, και αυτό είναι ακριβώς το οποίο θα εξερευνήσουμε στην επόμενη ενότητα.

Η ελκυστική λύση στο πρόβλημα μας του αναβοσβενούς φαινομένου βασίζεται σε ένα απλό αλλά ισχυρό αρχή:Συγχρονισμός της κατάστασης της εφαρμογής με τη διαδικασία απόδοσης του περιηγητή. Αντί να περιμένουμε τη φόρτωση της σελίδας για να ορίσουμε το θέμα, πρέπει να το ορίσουμε.ενώτο φόρτωση, ακόμα και πριν εφαρμοσθούν τα στυλ CSS.

Αυτή η προσέγγιση ονομάζεται "Early Loading" ή "Synchronous Preloading" στον όρο της ανάπτυξης ιστού. Η ιδέα είναι να εκτελέσουμε τη λογική ανίχνευσης θέματος όσο το δυνατόν πιο νωρίς στον κύκλο ζωής της σελίδας, ιδανικά μέσα στην ετικέτα`<head>`, ακόμη και πριν το περιηγητή αρχίσει να κατεβάζει τα αρχεία CSS.

Le `<head>`Ένα έγγραφο HTML επεξεργάζεται ακολουθιακά από τον περιηγέα, από πάνω προς τα κάτω. Κάθε στοιχείο επεξεργάζεται στη σειρά που εμφανίζεται. Αυτή η ιδιότητα είναι κρίσιμη για τη λύση μας.

Όταν ο περιηγητής συναντά μια ετικέτα`<script>`στόν`<head>`χωρίς τα χαρακτηριστικά`async` ou defer, il :

Αυτό το συμπεριφορικό, συχνά θεωρείται ως πρόβλημα απόδοσης (όθεν η συνήθης σύσταση να τοποθετούμε τα scripts στο τέλος της σελίδας), γίνεται ο σύμμαχος μας σε αυτή τη συγκεκριμένη περίπτωση. Τοποθετώντας το script μας για ανίχνευση θέματος στην αρχή του`<head>`, εγγυόμαστε ότι εκτελείται πριν ο φυλλομετρητής συναντήσει τις ετικέτες`<link>`των φύλλων στυλ μας.

Η πλήρης λύση μας αποτελείται από τρεις εξαρτημένες στρώσεις, κάθε μία παίζοντας έναν συγκεκριμένο ρόλο :

Επίπεδο 1: Διατήρηση (localStorage) Αυτό το στρώμα είναι υπεύθυνο για την αποθήκευση και την ανάκτηση της επιλογής του χρήστη μεταξύ των συνεδριών.

Επίπεδο 2 : Προωρή σύγχρονιση (ενσωματωμένο σενάριο στο <head>) Αυτό το επίπεδο συγχρονίζει την κατάσταση της εφαρμογής με το DOM πριν από την αρχική απόδοση.

Επιπέδος 3 : Ανταποκρινόμενοι Στυλ (CSS με επιλογείς ιδιοτήτων) Αυτό το επίπεδο καθορίζει τα οπτικά στυλ βασισμένα στην κατάσταση που ορίζεται από το επίπεδο 2.

Ας εξερευνήσουμε τώρα κάθε στρώση λεπτομερώς.

Le localStorage`είναι μια API Web Storage που επιτρέπει την αποθήκευση ζευγών κλειδί-τιμή στον περιηγητή με τρόπο διαρκή. Αντίθετα με τα cookie, τα δεδομένα του`localStorage:

Για την περίπτωση χρήσης μας, το`localStorage`είναι τέλειο γιατί :

Αυτό είναι ο τρόπος με τον οποίο αποθηκεύουμε την επιλογή του χρήστη όταν αλλάζει θέμα:

Είναι ζωτικής σημασίας να διαχειρίζεστε τις περιπτώσεις όπου το`localStorage`Δεν είναι διαθέσιμο ή προσβάσιμο. Πολλά σενάρια μπορεί να εμποδίσουν την πρόσβαση στο`localStorage`:

απαιjí ιδιωτική περιήγησηSafari σε λειτουργία ανώνυμης περιήγησης προκαλεί μια εξαίρεση`QuotaExceededError`Κατά τη διάρκεια των προσπαθειών εγγραφής στο`localStorage`.

Ρυθμίσεις ιδιωτικότητας: μερικοί φυλλομετρητές ή επεκτάσεις ιδιωτικότητας μπορούν να μπλοκάρουν τη πρόσβαση στο`localStorage`.

Περιορισμοί τομέα : Le `localStorage`δεν είναι διαθέσιμος στο πρωτόκολλο`file://`σε ορισμένους περιηγητές.

Χώρος αποθήκευσης γεμάτοςΑν και σπάνιος, ο χώρος αποθήκευσης μπορεί να είναι πλήρως γεμάτος.

Για_auto ο κώδικάς μας χρησιμοποιεί ένα μπλοκ`try…​catch`για να διαχειρίζεται αυτές τις περιπτώσεις ευγενώς, συνεχίζοντας να προσφέρει τη λειτουργία αλλαγής θέματος ακόμα και όταν η διατήρηση δεν είναι διαθέσιμη.

Για πιο εξελιγμένες εφαρμογές, μπορείτε να εξετάσετε πρόσθετες στρατηγικές :

Συγχρονισμός διακομιστή (προαιρετικό)

Αυτή η προσέγγιση επιτρέπει τη synchronism των προτιμήσεων μεταξύ συσκευών για τους συνδεδεμένους χρήστες, διατηρώντας παράλληλα την άμεση τοπική ανταπόκριση.

Αυτό είναι όπου η μαγία λειτουργεί πραγματικά. Θα τοποθετήσουμε ένα μικρό σενάριο.γραμμικόαμέσως στο`<head>`, πριν από όλα τα ετικέτα μας`<link>`de φύλλα στυλ. Αυτό το σενάριο είναι προσεκτικά ελαφρύ, αυτόνομο και σχεδιασμένο ώστε να εκτελείται όσο το δυνατόν γρήγορα.

Αναλύουμε αυτό το σενάριο γραμμή ανά γραμμή για να καταλάβουμε κάθε απόφαση σχεδιασμού :

Η IIFE (Έκφραση συνάρτησης που καλείται αμέσως)

Αυτή η δομή δημιουργεί μια συνάρτηση που εκτελείται αμέσως. Γιατί; Για να απομονώσουμε τις μεταβλητές μας σε ένα τοπικό scope και να αποφύγουμε τη μολυνση του global scope. Ακόμα και αν χρησιμοποιούμε μόνο`const`(που دارد εμβέλεια μπλοκ), το IIFE είναι μια καλή πρακτική που κάνει τους σκοπούς μας σαφείς και προστατεύει από πιθανούς συγκρούσεις ονομάτων.

Λειτουργία ΣΤΡΙΚΤ

Αυτή η οδηγία ενεργοποιεί τη στενή λειτουργία του JavaScript,που: - Απαγορεύει τη χρήση μη δηλωμένων μεταβλητών - Παραγεί σφάλματα για τις επικίνδυνες λειτουργίες - Βελτιώνει τις αποδόσεις σε ορισμένα JavaScript μηχανές

Για ένα κρίσιμο σενάριο όπως αυτό, θέλουμε τη μέγιστη ασφάλεια.

Το μπλοκ try…​catch

Αυτό το μπλοκ είναι απόλυτα ζωτικό. Εγγυάται ότι αν κάτι πάει στραβά (το localStorage είναι κλεισμένο, improbable syntax error, κ.λπ.), το script μας δεν θαμπολέει τη φόρτωση όλης της σελίδας. Η χρήση του`console.warn`αντί να`console.error`δεικνύει ότι είναι ένα μη κρίσιμο πρόβλημα.

Η ανάγνωση του localStorage

Αυτή η γραμμή μπορεί να πετάξει μια εξαίρεση σε ορισμένα πλαίσια (συμμόρια ιδιωτικής περιήγησης του Safari). Επομένως, βρίσκεται σε ένα μπλοκ try…​catch.

Η συνθηματική εφαρμογή

Εφαρμόζουμε το θέμα μόνο αν βρούμε ένα αποθηκευμένο. Αλλιώς, επιτρέπουμε στο CSS να χρησιμοποιήσει το προεπιλεγμένο του θέμα. Αυτή η προσέγγιση είναι πιο αξιόπιστη από μια προκαθορισμένη τιμή που είναι σκληρά κωδικοποιημένη στην JavaScript.

Μια προαιρετική αλλά ελεγαντή βελτίωση αποτελεί το εντοπισμός της προτίμησης θέματος του λειτουργικού συστήματος του χρήστη, εάν δεν έχει ακόμη κάνει μια ρητή επιλογή στην εφαρμογή σας :

Αυτή η λειτουργία χρησιμοποιεί την Media Query`prefers-color-scheme`Για να ερωτήσετε το σύστημα. Στο macOS, Windows 10+, iOS, και Android σύγχρονο, αυτή η ερώτηση επιστρέφει την προτίμηση του συστήματος του χρήστη.

Πλεονεκτήματα : - Προσωποποιημένη εμπειρία από την πρώτη επίσκεψη - Συμφωνία με το περιβάλλον του συστήματος του χρήστη - Δεν απαιτείται αποθήκευση για την πρώτη επίσκεψη

Σκέψεις : - Όχι όλοι οι περιηγητές υποστηρίζουν αυτή τη λειτουργία (όμως η υποστήριξη είναι εξαιρετική από το 2020) - Η επαλήθευση`window.matchMedia`Εγγυάται τη συμβατότητα - Ο χρήστης μπορεί πάντα να την αντικαταστήσει

Το script προφορτύλισης μας είναι σχεδιασμένο να είναι εξαιρετικά γρήγορο:

ελάχιστο μέγεθοςΠερίπου 300 byte μη μειωμένα, 200 byte μειωμένα. Είναι αβασανιστικό σε σύγκριση με οποιαδήποτε εικόνα ή βιβλιοθήκη JavaScript.

InlineΔεν απαιτείται πρόσθετη HTTP αίτηση. Ο κώδικας είναι στο HTML, άρα είναι αμέσως διαθέσιμος.

Απλές συγχρονιστικές λειτουργίεςΑνάγνωση ενός κλειδιού στο localStorage (πολύ γρήγορη λειτουργία) και τροποποίηση ενός DOM attribute (ενσωματωμένη λειτουργία του περιηγητή).

Καμία εξάρτησηΚαμία πλαίσιο, καμία βιβλιοθήκη, απλώς καθαρός JavaScript. Χωρίς χρόνο εκκίνησης, χωρίς ανάλυση εξαρτήσεων.

Μία εκτέλεσηΑυτό το σενάριο εκτελείται μόνο μία φορά κατά το φόρτωμα. Δεν υπάρχουν ακροατείς συμβάντων, δεν υπάρχουν βρόχοι, δεν υπάρχουν πολύπλοκοι υπολογισμοί.

Στη πράξη, σε σύγχρονο υλικό, αυτός ο script εκτελείται σε λιγότερο από 1 χιλιοστό του δευτέρου, ένας άπτοπτος χρόνος που δεν έχει καμία επίπτωση στην απόδοση φόρτωσης της σελίδας.

Η σειρά των στοιχείων στο`<head>`Είναι σημαντικό. Εδώ είναι η προτεινόμενη σειρά:

Αυτή η εντολή εγγυάει ότι:

Το Bootstrap 5 εισήγαγε ένα ελεγκτό σύστημα διαχείρισης θεμάτων βασισμένο στα CSS custom properties (μεταβλητές CSS) και τους επιλογείς χαρακτηριστικών. Αυτό το σύστημα χρησιμοποιεί το χαρακτηριστικό`data-bs-theme`στο στοιχείο`<html>`για να καθορίσει ποιο σύνολο μεταβλητών χρώματος να εφαρμόσετε

Η ομορφιά αυτού του συστήματος βρίσκεται στην απλότητά του: αντί για το να φορτώνουμε διαφορετικά φύλλα στυλ ή να εναλλάσσομαστε κλάσεις σε χιλιάδες στοιχεία, αλλάζουμε απλώς ένα χαρακτηριστικό σε ένα μόνο στοιχείο, και το CSS κάνει το υπόλοιπο χάρη στη διαδοχή.

Εδώ είναι μια πλήρης δομή CSS για την υλοποίηση ενός ανθεκτικού συστήματος θεμάτων :