Se sei incline a guardare il riquadro del browser con un occhio d'aquila, potresti aver notato che le pagine caricano spesso le loro immagini e il layout prima di caricare il loro testo, lo schema di caricamento esattamente opposto che abbiamo riscontrato negli anni '90. Cosa sta succedendo?
La sessione di domande e risposte di oggi ci arriva per gentile concessione di SuperUser, una suddivisione di Stack Exchange, un raggruppamento guidato dalla comunità di siti web di domande e risposte.
La domanda
Il lettore di SuperUser Laurent è molto curioso di sapere perché esattamente le pagine sembrano caricare elementi in modo completamente diverso da come facevano una volta. Lui scrive:
Ho notato che recentemente molti siti web sono lenti nel visualizzare il loro testo. Di solito vengono caricati lo sfondo, le immagini e così via, ma non il testo. Dopo un po 'di tempo il testo inizia ad apparire qua e là (non sempre tutto allo stesso tempo).
Fondamentalmente funziona al contrario di prima, quando il testo veniva visualizzato prima, poi le immagini e il resto veniva caricato in seguito. Quale nuova tecnologia sta creando questo problema? Qualche idea?
Tieni presente che la connessione è lenta, il che probabilmente accentua il problema.
Vedi [above] per un esempio: tutto è caricato ma ci vogliono ancora alcuni secondi prima che il testo venga finalmente visualizzato.
Allora cosa succede? Laurent, e molti di noi, ricordano un tempo in cui il testo veniva caricato per primo e tutto il resto - GIF animate sgargianti, sfondi affiancati e tutti gli altri artefatti della navigazione web della fine degli anni '90 - veniva dopo. Cosa causa prima l'attuale situazione degli elementi di design, poi il testo?
La risposta
Il collaboratore di SuperUser Daniel Andersson offre una risposta meravigliosamente dettagliata che arriva fino in fondo al mistero del perché il caricamento dei caratteri dura:
Uno dei motivi è che oggigiorno ai web designer piace usare i caratteri web (di solito in WOFF formato), ad es. attraverso Caratteri Web di Google .
In precedenza, gli unici caratteri che potevano essere visualizzati su un sito erano quelli che l'utente aveva installato localmente. Poiché ad es. Gli utenti Mac e Windows non avevano necessariamente gli stessi caratteri, i designer istintivamente definivano sempre regole come
famiglia di caratteri: Arial, Helvetica, sans-serif;dove, se il primo carattere non è stato trovato nel sistema, il browser cercherà il secondo e infine un carattere "sans-serif" di riserva.
Ora, si può fornire un URL di font come regola CSS per fare in modo che il browser scarichi un font, in quanto tale:
@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700);e quindi caricare il carattere per un elemento specifico, ad esempio:
famiglia di caratteri: "Droid Serif", sans-serif;Questo è molto popolare per poter utilizzare caratteri personalizzati, ma porta anche al problema che nessun testo viene visualizzato fino a quando la risorsa non è stata caricata dal browser, che include il tempo di download, il tempo di caricamento del carattere e il tempo di rendering. Mi aspetto che questo sia l'artefatto che stai vivendo.
Ad esempio: uno dei miei giornali nazionali, Le notizie di oggi , usa i caratteri web per i loro titoli, ma non i loro contatti, quindi quando quel sito viene caricato di solito vedo prima i contatti e mezzo secondo dopo tutti gli spazi vuoti sopra sono popolati con i titoli (questo è vero su Chrome e Opera, a almeno. Non ho provato altri).
(Inoltre, i designer spruzzano JavaScript assolutamente ovunque in questi giorni, quindi forse qualcuno sta cercando di fare qualcosa di intelligente con il testo, motivo per cui viene ritardato. Sarebbe molto specifico per il sito, però: la tendenza generale per il testo a essere ritardato in questi times è il problema dei caratteri web descritto sopra, credo.)
Aggiunta:
Questa risposta è stata molto votata, anche se non sono entrato nei dettagli, o forse perché di questo. Ci sono stati molti commenti nel thread della domanda, quindi cercherò di espandere un po '[…]
Il fenomeno è apparentemente noto come "flash di contenuto non stilato" in generale e "flash di testo non stilato" in particolare. La ricerca di "FOUC" e "FOUT" fornisce maggiori informazioni.
Posso consigliare post del web designer Paul Irish su FOUT in relazione ai caratteri web .
Quello che si può notare è che diversi browser gestiscono questo in modo diverso. Ho scritto sopra che avevo testato Opera e Chrome, che si sono comportati allo stesso modo. Tutti quelli basati su WebKit (Chrome, Safari, ecc.) Scelgono di evitare FOUT by non rendering del testo del carattere web con un carattere di riserva durante il periodo di caricamento del carattere web. Anche se il carattere web è memorizzato nella cache, lì volontà essere un ritardo di rendering . Ci sono molti commenti in questo thread di domande che dicono il contrario e che è completamente sbagliato che i caratteri memorizzati nella cache si comportino in questo modo, ma ad es. dal link sopra:
In quali casi otterrai un FOUT
- Volontà: Download e visualizzazione di un ttf / otf / woff remoto
- Volontà: Visualizzazione di un ttf / otf / woff memorizzato nella cache
- Volontà: Download e visualizzazione di un data-uri ttf / otf / woff
- Volontà: Visualizzazione di un data-uri in cache ttf / otf / woff
- Non: Visualizzazione di un carattere già installato e denominato nella pila di caratteri tradizionale
- Non: Visualizzazione di un carattere installato e denominato utilizzando la posizione local ()
Poiché Chrome attende che il rischio QUATTRO sia andato prima del rendering, questo dà un ritardo. A cui estensione l'effetto è visibile (specialmente durante il caricamento dalla cache) sembra dipendere, tra le altre cose, dalla quantità di testo che deve essere reso e forse da altri fattori, ma la memorizzazione nella cache non rimuove completamente l'effetto.
L'irlandese ha anche alcuni aggiornamenti riguardanti il comportamento del browser a partire dal 2011-04-14 in fondo al post:
- Firefox (a partire da FFb11 e FF4 Final) non ha più un FOUT! Wooohoo! http://bugzil.la/499292 Fondamentalmente il testo è invisibile per 3 secondi, quindi riporta il carattere di riserva. Il carattere web verrà probabilmente caricato entro quei tre secondi però ... si spera ...
- IE9 supporta WOFF, TTF e OTF (sebbene richieda un po 'di inclusione impostare cosa - per lo più discutibile se usi WOFF). TUTTAVIA!!! IE9 ha un FOUT. :(
- Webkit ha una patch in attesa di atterrare per mostrare il testo di riserva dopo 0,5 secondi. Quindi lo stesso comportamento di FF ma 0.5s invece di 3s.
Se questa fosse una domanda rivolta ai designer, si potrebbe andare in modi per evitare questo tipo di problemi come
webfontloader, ma questa sarebbe un'altra domanda. Il collegamento Paul Irish va più in dettaglio su questo argomento.
Hai qualcosa da aggiungere alla spiegazione? Suona nei commenti. Vuoi leggere altre risposte da altri utenti esperti di tecnologia Stack Exchange? Dai un'occhiata al thread di discussione completo qui .
