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

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

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

Η ερώτηση

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

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

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

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

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

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

Ο συνεργάτης της απάντησης

SuperUser Daniel Andersson προσφέρει μια θαυμάσια λεπτομερή απάντηση που πηγαίνει στο κάτω μέρος του τελευταίου μυστηρίου γιατί: το

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

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

: Arial, Helvetica, sans-serif.

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

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

@import url( http: //fonts.googleapis.com/ css? Family = Droid + Serif: 400.700);

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

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

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

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

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

Προσθήκη:

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

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

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

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

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

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

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

Irish έχει επίσης κάποιες ενημερώσεις σχετικά με τη συμπεριφορά του προγράμματος περιήγησης από τις 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 αντί για το 3.

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

Έχετε κάτι να προσθέσετε στην εξήγηση;Καταλαβαίνετε το πλήρες νήμα συζήτησης εδώ