Inhaltsverzeichnis:
Die heutige Question & Answer-Sitzung wird von SuperUser zur Verfügung gestellt - einer Unterteilung von Stack Exchange, einer Community-basierten Gruppierung von Q & A-Websites.
Die Frage
Superuser-Leser Laurent ist sehr neugierig, warum genau Elemente scheinbar ganz anders geladen werden als früher. Er schreibt:
I’ve noticed that recently many websites are slow to display their text. Usually, the background, images and so on are going to be loaded, but no text. After some time the text starts appearing here and there (not always all of it at the same time).
It basically works the opposite as it used to, when the text was displayed first, then the images and the rest was loading afterwards. What new technology is creating this issue? Any idea?
Note that I’m on a slow connection, which probably accentuates the problem.
See [above] for an example – everything’s loaded but it takes a few more seconds before the text is finally displayed.
Was gibt es? Laurent und viele von uns erinnern sich an eine Zeit, als der Text zuerst geladen wurde und alles andere - garrish animierte GIFs, gekachelte Hintergründe und alle anderen Artefakte des Webbrowsers der späten 90er Jahre - später kamen. Was verursacht die aktuelle Situation von Designelementen zuerst, später Text?
Die Antwort
Der SuperUser-Mitwirkende Daniel Andersson bietet eine wunderbar detaillierte Antwort, die dem Warum-die-Fonts-Last-Last-Rätsel auf den Grund geht:
One reason is that web designers nowadays like to use web fonts (usually in WOFF format), e.g. throughGoogle Web fonts.
Previously, the only fonts that were able to be displayed on a site was those that the user had locally installed. Since e.g. Mac and Windows users not necessarily had the same fonts, designers instinctively always defined rules as
font-family: Arial, Helvetica, sans-serif;
Wenn der erste Zeichensatz nicht auf dem System gefunden wurde, sucht der Browser nach dem zweiten Zeichensatz und zuletzt nach einem Fall-Sans-Serif-Zeichensatz.
Nun kann man eine Schriftart-URL als CSS-Regel angeben, damit der Browser eine Schriftart herunterladen kann:
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);
Laden Sie dann die Schriftart für ein bestimmtes Element, indem Sie z.
font-family: 'Droid Serif',sans-serif;
Dies ist sehr beliebt, um benutzerdefinierte Schriftarten verwenden zu können, es führt jedoch auch zu dem Problem, dass kein Text angezeigt wird, bis die Ressource vom Browser geladen wurde. Dazu gehören die Downloadzeit, die Ladezeit der Schriftart und die Renderzeit. Ich gehe davon aus, dass dies das Artefakt ist, das Sie erleben.
Ein Beispiel: Eine meiner nationalen Zeitungen, Dagens Nyheter, verwendet Webschriftarten für ihre Schlagzeilen, jedoch nicht für ihre Leads. Wenn diese Website geladen ist, sehe ich normalerweise zuerst die Leads, und eine halbe Sekunde später sind alle darüber liegenden Leerzeichen belegt mit Schlagzeilen (dies gilt zumindest für Chrome und Opera. Ich habe andere nicht ausprobiert).
(Außerdem streuen Designer heutzutage absolut überall JavaScript, weshalb jemand versucht, etwas Kluges mit dem Text zu tun, weshalb er verzögert wird. Dies wäre jedoch sehr ortsspezifisch: die allgemeine Tendenz, dass Text in diesen verzögert wird Ich glaube, mal ist das Problem der Web-Fonts, das oben beschrieben wurde.
Zusatz:
Diese Antwort wurde sehr positiv, obwohl ich nicht viel ins Detail ging oderda von diesem. Es gab viele Kommentare in dem Fragenthread, also versuche ich ein wenig zu erweitern […]
Das Phänomen ist anscheinend allgemein als "Blitz von ungestyltem Inhalt" und "Blitz von ungestyltem Text" im Besonderen bekannt. Die Suche nach “FOUC” und “FOUT” liefert weitere Informationen.
Ich kann den Beitrag des Webdesigners Paul Irish zu FOUT in Verbindung mit Webfonts empfehlen.
Was man feststellen kann ist, dass verschiedene Browser dies unterschiedlich behandeln. Ich schrieb oben, dass ich Opera und Chrome getestet hatte, die sich beide ähnlich verhielten. Alle WebKit-basierten (Chrome, Safari usw.) verwenden, um FOUT von zu vermeidennicht Rendern von Web-Font-Text mit einer Fallback-Schriftart während des Ladens der Web-Schriftart. Selbst wenn Die Webschriftart wird dort zwischengespeichertwerden eine Renderverzögerung sein. Es gibt viele Kommentare in diesem Fragenthread, die etwas anderes sagen und dass es völlig falsch ist, dass zwischengespeicherte Schriftarten sich so verhalten, aber z. vom obigen Link:
In welchen Fällen bekommst du einen FOUT
- Wille: Herunterladen und Anzeigen einer Fernbedienung ttf / otf / woff
- Wille: Anzeigen eines zwischengespeicherten TTF / OTF / WOFF
- Wille: Herunterladen und Anzeigen eines data-uri ttf / otf / woff
- Wille: Anzeigen einer zwischengespeicherten Daten-uri ttf / otf / woff
- Wird nicht: Anzeigen einer Schrift, die bereits installiert und in Ihrem herkömmlichen Schriftstapel benannt ist
- Wird nicht: Anzeigen einer Schrift, die installiert und über den Speicherort local () benannt wird
Da Chrome vor dem Rendern wartet, bis das FOUT-Risiko verschwunden ist, führt dies zu einer Verzögerung. Zu welchemUmfang Der Effekt ist sichtbar (insbesondere beim Laden aus dem Cache). Er scheint abhängig zu sein von der Menge des Textes, die gerendert werden muss, und möglicherweise anderen Faktoren. Durch das Zwischenspeichern wird der Effekt jedoch nicht vollständig beseitigt.
Irish hat auch einige Updates zum Browserverhalten von 2011–04–14 am Ende des Beitrags hinzugefügt:
- Feuerfuchs (ab FFb11 und FF4 Finale) hat keinen FOUT mehr! Wooohoo! Http: //bugzil.la/499292 Grundsätzlich ist der Text 3 Sekunden lang unsichtbar und bringt dann die Fallback-Schriftart zurück. Der Webfont wird wahrscheinlich innerhalb dieser drei Sekunden geladen … hoffentlich..
- IE9 unterstützt WOFF und TTF und OTF (obwohl dies ein Bit zum Einbetten erfordert - meistens wenn Sie WOFF verwenden). JEDOCH!!! IE9 hat einen FOUT.:(
- Webkit hat einen Patch, der nach 0,5 Sekunden auf Landung wartet, um Fallback-Text anzuzeigen. Also dasselbe Verhalten wie bei FF aber 0,5s statt 3s.
Wenn dies eine Frage an Designer war, könnte man Wege gehen, um solche Probleme wie etwa zu vermeiden
webfontloader
, aber das wäre eine andere Frage. Der Paul-Irische Link geht in dieser Angelegenheit weiter ins Detail.
Haben Sie etwas zur Erklärung hinzuzufügen? Ton aus in den Kommentaren. Möchten Sie mehr Antworten von anderen technisch versierten Stack Exchange-Benutzern lesen? Hier geht es zum vollständigen Diskussionsthread.
