Εάν είστε επιρρεπείς να παρακολουθείτε το παράθυρο του προγράμματος περιήγησης με ένα αετό μάτι, μπορεί να έχετε παρατηρήσει ότι οι σελίδες φορτώνουν συχνά τις εικόνες και τη διάταξή τους πριν από τη φόρτωση του κειμένου τους - το ακριβώς αντίθετο μοτίβο φόρτωσης που βιώσαμε κατά τη δεκαετία του 1990. Τι συμβαίνει?
Η σημερινή συνεδρία Ερωτήσεων & Απαντήσεων μας προσφέρει ευγενική προσφορά του SuperUser - μια υποδιαίρεση του Stack Exchange, μιας ομάδας ιστότοπων Q&A που βασίζεται στην κοινότητα.
Το ερώτημα
Ο αναγνώστης SuperUser Laurent είναι πολύ περίεργος για το γιατί ακριβώς οι σελίδες φαίνεται να φορτώνουν στοιχεία εντελώς διαφορετικά από ό, τι κάποτε. Αυτός γράφει:
Παρατήρησα ότι πρόσφατα πολλοί ιστότοποι εμφανίζουν αργή εμφάνιση του κειμένου τους. Συνήθως, το φόντο, οι εικόνες και ούτω καθεξής θα φορτώνονται, αλλά δεν υπάρχει κείμενο. Μετά από λίγο καιρό το κείμενο αρχίζει να εμφανίζεται εδώ και εκεί (όχι πάντα όλα ταυτόχρονα).
Λειτουργεί βασικά το αντίθετο όπως ήταν, όταν εμφανίστηκε το κείμενο πρώτα, τότε οι εικόνες και οι υπόλοιπες φόρτωσαν μετά. Ποια νέα τεχνολογία δημιουργεί αυτό το ζήτημα; Καμια ιδεα?
Λάβετε υπόψη ότι είμαι σε αργή σύνδεση, η οποία πιθανότατα τονίζει το πρόβλημα.
Δείτε το [above] για παράδειγμα - όλα έχουν φορτωθεί, αλλά χρειάζονται λίγα ακόμη δευτερόλεπτα για να εμφανιστεί τελικά το κείμενο.
Τι δίνει λοιπόν; Ο Λόρεντ, και πολλοί από εμάς, θυμόμαστε μια στιγμή που το κείμενο φορτώθηκε πρώτα και όλα τα άλλα - garrish κινούμενα GIF, φόντο με πλακάκια και όλα τα άλλα αντικείμενα της περιήγησης στο Web στα τέλη της δεκαετίας του '90 - ήρθαν αργότερα. Τι προκαλεί την τρέχουσα κατάσταση των στοιχείων σχεδίασης πρώτα, μετά από κείμενο;
Η απάντηση
Ο συνεργάτης του SuperUser Daniel Andersson προσφέρει μια υπέροχη λεπτομερή απάντηση που φτάνει ακριβώς στο κάτω μέρος του μυστηρίου γιατί-the-fonts-load-last:
Ένας λόγος είναι ότι οι σχεδιαστές ιστοσελίδων σήμερα προτιμούν να χρησιμοποιούν γραμματοσειρές Ιστού (συνήθως σε WOFF μορφή), π.χ. διά μέσου Γραμματοσειρές Ιστού Google .
Προηγουμένως, οι μόνες γραμματοσειρές που μπορούσαν να εμφανιστούν σε έναν ιστότοπο ήταν αυτές που ο χρήστης είχε εγκαταστήσει τοπικά. Από π.χ. Οι χρήστες Mac και Windows δεν είχαν απαραίτητα τις ίδιες γραμματοσειρές, οι σχεδιαστές καθορίζουν ενστικτωδώς πάντα κανόνες όπως
font-family: Arial, Helvetica, sans-serif;όπου, εάν δεν βρέθηκε η πρώτη γραμματοσειρά στο σύστημα, το πρόγραμμα περιήγησης θα αναζητούσε τη δεύτερη και, τέλος, μια εναλλακτική γραμματοσειρά "sans-serif".
Τώρα, μπορεί κανείς να δώσει μια διεύθυνση URL γραμματοσειράς ως κανόνα CSS για να πάρει το πρόγραμμα περιήγησης να κατεβάσει μια γραμματοσειρά, ως εξής:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);και, στη συνέχεια, φορτώστε τη γραμματοσειρά για ένα συγκεκριμένο στοιχείο π.χ.
font-family: 'Droid Serif', sans-serif;Αυτό είναι πολύ δημοφιλές για να μπορείτε να χρησιμοποιήσετε προσαρμοσμένες γραμματοσειρές, αλλά οδηγεί επίσης στο πρόβλημα ότι δεν εμφανίζεται κείμενο έως ότου φορτωθεί ο πόρος από το πρόγραμμα περιήγησης, το οποίο περιλαμβάνει τον χρόνο λήψης, τον χρόνο φόρτωσης της γραμματοσειράς και τον χρόνο απόδοσης. Περιμένω ότι αυτό είναι το τεχνούργημα που αντιμετωπίζετε.
Για παράδειγμα: μία από τις εθνικές μου εφημερίδες, Τα σημερινά νέα , χρησιμοποιήστε γραμματοσειρές ιστού για τους τίτλους τους, αλλά όχι για τους δυνητικούς πελάτες τους, οπότε όταν φορτώνεται αυτός ο ιστότοπος, συνήθως βλέπω τους δυνητικούς πελάτες πρώτα και μισό δευτερόλεπτο αργότερα όλοι οι κενοί χώροι συμπληρώνονται με επικεφαλίδες (αυτό ισχύει για το Chrome και το Opera, στο τουλάχιστον. Δεν έχω δοκιμάσει άλλους).
(Επίσης, οι σχεδιαστές πασπαλίζουν το JavaScript απολύτως παντού αυτές τις μέρες, οπότε ίσως κάποιος προσπαθεί να κάνει κάτι έξυπνο με το κείμενο, γι 'αυτό καθυστερεί. Αυτό θα ήταν πολύ συγκεκριμένο ιστότοπο, ωστόσο: η γενική τάση για καθυστέρηση κειμένου σε αυτά φορές είναι το θέμα των γραμματοσειρών ιστού που περιγράφεται παραπάνω, πιστεύω.
Πρόσθεση:
Αυτή η απάντηση έγινε πολύ θετική, αν και δεν πήγα σε πολλές λεπτομέρειες ή ίσως επειδή από αυτό. Υπήρξαν πολλά σχόλια στο νήμα των ερωτήσεων, οπότε θα προσπαθήσω να επεκτείνω λίγο […]
Το φαινόμενο είναι προφανώς γνωστό ως «αναλαμπή του ασταθούς περιεχομένου» εν γένει και «φλας του ασταθούς κειμένου» ειδικότερα. Η αναζήτηση για "FOUC" και "FOUT" δίνει περισσότερες πληροφορίες.
Μπορώ να προτείνω ανάρτηση του σχεδιαστή Ιστού Paul Irish στο FOUT σε σχέση με γραμματοσειρές ιστού .
Αυτό που μπορεί να σημειωθεί είναι ότι διαφορετικά προγράμματα περιήγησης το χειρίζονται διαφορετικά. Έγραψα παραπάνω ότι είχα δοκιμάσει το Opera και το Chrome, που και οι δύο συμπεριφέρθηκαν παρόμοια. Όλα τα βασισμένα στο WebKit (Chrome, Safari κ.λπ.) επιλέγουν να αποφύγουν το FOUT δεν απόδοση κειμένου γραμματοσειράς Ιστού με εναλλακτική γραμματοσειρά κατά τη διάρκεια της περιόδου φόρτωσης γραμματοσειράς Ιστού Ακόμα κι αν η γραμματοσειρά web αποθηκεύεται προσωρινά θα να είναι καθυστέρηση απόδοσης . Υπάρχουν πολλά σχόλια σε αυτό το νήμα ερωτήσεων που λένε διαφορετικά και ότι είναι λάθος ότι οι κρυφές γραμματοσειρές συμπεριφέρονται έτσι, αλλά π.χ. από τον παραπάνω σύνδεσμο:
Σε ποιες περιπτώσεις θα λάβετε ένα FOUT
- Θα: Λήψη και εμφάνιση ενός απομακρυσμένου ttf / otf / woff
- Θα: Εμφάνιση κρυφής μνήμης ttf / otf / woff
- Θα: Λήψη και εμφάνιση δεδομένων-uri ttf / otf / woff
- Θα: Εμφάνιση κρυφής μνήμης δεδομένων-uri ttf / otf / woff
- Δεν θα: Εμφάνιση γραμματοσειράς που είναι ήδη εγκατεστημένη και ονομάζεται στην παραδοσιακή στοίβα γραμματοσειρών σας
- Δεν θα: Εμφάνιση γραμματοσειράς που είναι εγκατεστημένη και ονομάζεται χρησιμοποιώντας την τοπική () τοποθεσία
Δεδομένου ότι το Chrome περιμένει έως ότου εξαφανιστεί ο ΤΡΙΤΟΣ κίνδυνος πριν από την απόδοση, αυτό καθυστερεί. Στην οποία έκταση το αποτέλεσμα είναι ορατό (ειδικά όταν φορτώνεται από την προσωρινή μνήμη) φαίνεται να εξαρτάται, μεταξύ άλλων, από την ποσότητα του κειμένου που πρέπει να αποδίδεται και ίσως από άλλους παράγοντες, αλλά η προσωρινή αποθήκευση δεν αφαιρεί εντελώς το αποτέλεσμα.
Τα Ιρλανδικά έχουν επίσης ορισμένες ενημερώσεις σχετικά με τη συμπεριφορά του προγράμματος περιήγησης από το 2011-04–14 στο κάτω μέρος της ανάρτησης:
- Firefox (από τον τελικό FFb11 και FF4) δεν έχει πλέον FOUT! Γουοοχ! ήττπ://βυγζίλ.λα/499292 Βασικά το κείμενο είναι αόρατο για 3 δευτερόλεπτα και στη συνέχεια επαναφέρει την εναλλακτική γραμματοσειρά. Το webfont πιθανότατα θα φορτωθεί μέσα σε αυτά τα τρία δευτερόλεπτα ... ελπίζουμε ..
- Το IE9 υποστηρίζει WOFF και TTF και OTF (αν και απαιτείται ένα ενσωματωμένο κομμάτι ορίστε το πράγμα - ως επί το πλείστον διαφωνεί αν χρησιμοποιείτε WOFF). ΩΣΤΟΣΟ!!! Το IE9 έχει FOUT. :(
- Το Webkit έχει ένα μπάλωμα που περιμένει να προσγειωθεί για εμφάνιση εναλλακτικού κειμένου μετά από 0,5 δευτερόλεπτα. Τόσο ίδια συμπεριφορά με το FF, αλλά 0,5 αντί για 3s.
Εάν αυτή ήταν μια ερώτηση που απευθύνεται σε σχεδιαστές, θα μπορούσε κανείς να βρει τρόπους για να αποφύγει τέτοια είδη προβλημάτων όπως
webfontloader, αλλά αυτό θα ήταν μια άλλη ερώτηση. Ο σύνδεσμος Paul Irish αναφέρεται σε περισσότερες λεπτομέρειες σχετικά με αυτό το θέμα.
Έχετε κάτι να προσθέσετε στην εξήγηση; Ακούστε στα σχόλια. Θέλετε να διαβάσετε περισσότερες απαντήσεις από άλλους χρήστες τεχνολογίας Stack Exchange; Δείτε ολόκληρο το νήμα συζήτησης εδώ .
