Γιατί οι ιστοσελίδες δεν εμφανίζουν αμέσως το κείμενό τους;

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

Η σημερινή συνάντηση ερωτήσεων και απαντήσεων έρχεται σε επαφή με το SuperUser - μια υποδιαίρεση του Stack Exchange, μια κοινότητα που κατευθύνεται από τους ιστότοπους ερωτήσεων & απαντήσεων.

Το ερώτημα

Ο αναγνώστης SuperUser Laurent είναι πολύ περίεργος για το γιατί ακριβώς οι σελίδες φαίνεται να φορτώνουν στοιχεία εντελώς διαφορετικά από ό, τι κάποτε. Αυτός γράφει:

Έχω παρατηρήσει ότι πρόσφατα πολλές ιστοσελίδες αργούν να εμφανίσουν το κείμενό τους. Συνήθως, το φόντο, οι εικόνες και τα λοιπά θα φορτωθούν, αλλά κανένα κείμενο. Μετά από κάποιο χρονικό διάστημα το κείμενο αρχίζει να εμφανίζεται εδώ και εκεί (όχι πάντα όλα ταυτόχρονα).

Βασικά λειτουργεί το αντίθετο όπως ήταν, όταν το κείμενο εμφανίστηκε πρώτα, τότε οι εικόνες και τα υπόλοιπα φορτώνονταν αργότερα. Ποια νέα τεχνολογία δημιουργεί αυτό το ζήτημα; Καμια ιδεα?

Σημειώστε ότι είμαι σε μια αργή σύνδεση, η οποία πιθανώς τονίζει το πρόβλημα.

Δείτε το [παραπάνω] για παράδειγμα - όλα φορτώνονται, αλλά χρειάζονται μερικά δευτερόλεπτα για να εμφανιστεί τελικά το κείμενο.

Τι δίνει; Ο Laurent, και πολλοί από εμάς, θυμούνται μια εποχή που το κείμενο έχει φορτωθεί πρώτα και οτιδήποτε άλλο - τα γκρίζα κινούμενα GIF, τα πλακάκια και όλα τα άλλα αντικείμενα της περιήγησης στο Web της δεκαετίας του 90 - ήρθαν αργότερα. Τι προκαλεί την τρέχουσα κατάσταση των στοιχείων σχεδιασμού πρώτα, κείμενο αργότερα?

Η απάντηση

Ο συνεργάτης του SuperUser Daniel Andersson προσφέρει μια θαυμάσια λεπτομερή απάντηση που πηγαίνει δεξιά στο τέλος του μυστηρίου για το γιατί-the-fonts-load-last:

Ένας λόγος είναι ότι οι σχεδιαστές ιστοσελίδων προτιμούν σήμερα να χρησιμοποιούν γραμματοσειρές ιστού (συνήθως σε μορφή WOFF), π.χ. μέσω των γραμματοσειρών του Google Web.

Προηγουμένως, οι μοναδικές γραμματοσειρές που μπόρεσαν να εμφανιστούν σε έναν ιστότοπο ήταν αυτές που ο χρήστης είχε εγκαταστήσει τοπικά. Από π.χ. Οι χρήστες Mac και Windows δεν είχαν απαραιτήτως τις ίδιες γραμματοσειρές, οι σχεδιαστές ορίζονταν πάντα ενστικτωδώς ως κανόνες

γραμματοσειρά-οικογένεια: Arial, Helvetica, sans-serif; 

όπου, αν η πρώτη γραμματοσειρά δεν βρεθεί στο σύστημα, το πρόγραμμα περιήγησης θα ψάχνει για το δεύτερο, και τελικά ένα εφεδρικό font "sans-serif".

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

@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700). 

και στη συνέχεια φορτώστε τη γραμματοσειρά για ένα συγκεκριμένο στοιχείο π.χ.

γραμματοσειρά-οικογένεια: 'Droid Serif', sans-serif; 

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

Για παράδειγμα, μία από τις εθνικές μου εφημερίδες, το Dagens Nyheter, χρησιμοποιεί γραμματοσειρές web για τους τίτλους τους, αλλά όχι τους οδηγούς τους, οπότε όταν φορτώνεται αυτός ο ιστότοπος, βλέπω τους οδηγούς πρώτα και μισό δευτερόλεπτο αργότερα, με τίτλους (αυτό ισχύει τουλάχιστον για το Chrome και την Όπερα, δεν έχουν δοκιμάσει άλλους).

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

Πρόσθεση:

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

Το φαινόμενο είναι προφανώς γνωστό ως "φλας από ασταθές περιεχόμενο" γενικά, και ειδικότερα "φλας από ασταθές κείμενο". Η αναζήτηση για "FOUC" και "FOUT" δίνει περισσότερες πληροφορίες.

Μπορώ να συστήσω τη δημοσίευση του σχεδιαστή Paul Irish στο FOUT σε σχέση με τις γραμματοσειρές web.

Αυτό που μπορεί κανείς να σημειώσει είναι ότι διαφορετικά προγράμματα περιήγησης χειρίζονται αυτό διαφορετικά. Έγραψα παραπάνω ότι είχα δοκιμάσει την Όπερα και το Chrome, που συμπεριφέρθηκαν και οι δύο με όμοιο τρόπο. Όλα τα βασισμένα στο WebKit (Chrome, Safari, κλπ.) Επιλέγουν να αποφύγουν το FOUT από δεν καθιστώντας το κείμενο γραμματοσειράς ιστού με μια γραμματοσειρά εναλλαγής κατά τη διάρκεια της περιόδου φόρτωσης γραμματοσειράς Ιστού. Ακόμα κι αν η γραμματοσειρά του ιστού είναι αποθηκευμένη στο cache, εκεί θα να είναι καθυστέρηση απόδοσης. Υπάρχουν πολλά σχόλια σε αυτό το νήμα ερωτήσεων λέγοντας διαφορετικά και ότι είναι λάθος ότι οι αποθηκευμένες γραμματοσειρές συμπεριφέρονται όπως αυτό, αλλά π.χ. από τον παραπάνω σύνδεσμο:

Σε ποιες περιπτώσεις θα πάρετε ένα FOUT

• Θα: Λήψη και προβολή ενός απομακρυσμένου ttf / otf / woff
• Θα: Εμφανίζεται ένα προσωρινά αποθηκευμένο αρχείο ttf / otf / woff
• Θα: Λήψη και εμφάνιση δεδομένων ttf / otf / woff
• Θα: Εμφάνιση αποθηκευμένου δεδομένων ttf / otf / woff
• Δεν θα: Εμφάνιση μιας γραμματοσειράς που είναι ήδη εγκατεστημένη και ονομάζεται στην παραδοσιακή στοίβα γραμματοσειρών σας
• Δεν θα: Εμφάνιση μιας γραμματοσειράς που είναι εγκατεστημένη και ονομάζεται με τη χρήση της τοπικής () θέσης

Επειδή το Chrome περιμένει μέχρι να εξαφανιστεί ο κίνδυνος FOUT πριν από την απόδοση, αυτό καθυστερεί. Στην οποία έκταση το αποτέλεσμα είναι ορατό (ειδικά όταν γίνεται φόρτωση από τη μνήμη cache) φαίνεται να εξαρτάται μεταξύ άλλων από το ποσό του κειμένου που χρειάζεται να αποτυπωθεί και ίσως από άλλους παράγοντες, αλλά η προσωρινή αποθήκευση δεν καταργεί εντελώς το αποτέλεσμα.

Οι ιρλανδοί έχουν επίσης κάποιες ενημερώσεις σχετικά με τη συμπεριφορά του προγράμματος περιήγησης από τις 2011-04-14 στο κάτω μέρος της ανάρτησης:

• Firefox (από το FFb11 και το FF4 Final) δεν έχει πλέον FOUT! Wooohoo! Http: //bugzil.la/499292 Βασικά το κείμενο είναι αόρατο για 3 δευτερόλεπτα και μετά επιστρέφει την εφεδρική γραμματοσειρά. Το webfont πιθανώς να φορτωθεί μέσα σε αυτά τα τρία δευτερόλεπτα αν και ... ελπίζουμε ...
• Το IE9 υποστηρίζει το WOFF και το TTF και το OTF (αν και απαιτεί ένα ενσωματωμένο πράγμα bitset - συνήθως μιλάει αν χρησιμοποιείς WOFF). ΩΣΤΟΣΟ!!! Το IE9 έχει FOUT. :(
• Το Webkit έχει μια ενημερωμένη έκδοση κώδικα που περιμένει να προσγειωθεί για να εμφανίσει το εφεδρικό κείμενο μετά από 0,5 δευτερόλεπτα. Την ίδια συμπεριφορά με την FF αλλά 0,5s αντί για 3s.

Εάν αυτό ήταν ένα ερώτημα που απευθύνεται στους σχεδιαστές, θα μπορούσαμε να βρούμε τρόπους για να αποφύγουμε τέτοιου είδους προβλήματα όπως webfontloader, αλλά αυτό θα ήταν μια άλλη ερώτηση. Ο σύνδεσμος Paul Ιρλανδός περιγράφει λεπτομερέστερα το θέμα.

Έχετε κάτι να προσθέσετε στην εξήγηση; Απενεργοποιήστε τα σχόλια. Θέλετε να διαβάσετε περισσότερες απαντήσεις από άλλους τεχνολογικούς χρήστες Stack Exchange; Δείτε το πλήρες νήμα συζήτησης εδώ.