Dlaczego fonty webfonty są renderowane z opóźnieniem w CSS (base64-encoded)?

Question

Dlaczego fonty webfonty są renderowane z opóźnieniem w CSS (base64-encoded)?

[[4]}Twitter zaczął używać WOFF webfont (screenshot). Ta czcionka jest zakodowana base64 i inlined w pliku CSS, który jest <link>ed wewnątrz <head>.

Teraz, jeśli dobrze rozumiem, <link>ed arkusze stylów CSS blokują renderowanie, tzn. przeglądarki nie będą renderować strony, dopóki nie pobierze/nie przetworzy jej zewnętrznych plików CSS.

W tym przypadku, podczas odwiedzania Twittera, przeglądarka powinna załadować plik CSS zawierający webfont, a następnie renderować stronę z tym webfont . Jednak wykonałem test (na pustej pamięci podręcznej/historii przeglądarki) w Chrome / Windows i wyświetlany jest webfont z opóźnieniem : tekst na stronie jest najpierw renderowany przy użyciu domyślnej czcionki sans-serif systemu operacyjnego, a następnie, po kilku sekundach, webfont "kopie" i zastępuje czcionkę systemową.

Zobacz tutaj: https://www.youtube.com/watch?v=yt9UXHmNofA (przełącznik występuje przy znaku 6 sek)

Dlaczego tak się dzieje? Dlaczego Chrome nie wyświetlanie webfonta przy pierwszym renderowaniu? Czy to możliwe, że dekodowanie base64 odbywa się asynchronicznie?

7

html css browser base64 webfonts

Author: Fabrício Matté, 2014-06-04

Source

1 answers

score 9 · Accepted Answer

[16]}(składając to razem w Odpowiedź, aby ludzie nie musieli czytać przez niekończące się komentarze)

Nieoczekiwanie nie ma to związku z przeglądarką, chodzi raczej o to, jak Twitter zawiera arkusz stylów.

Zasadniczo plik cookie o nazwie "goth" określa, czy arkusz stylów czcionek jest wstrzykiwany w sposób blokujący lub nieblokujący.

Szczegółowe wyjaśnienie

W pierwszym załadowaniu (bez plików cookie) strony na Twitterze arkusz stylów czcionek jest asynchronicznie (tj. w sposób nieblokujący) i plik cookie o nazwie "goth" jest ustawiony 1.

W kolejnych zapytaniach, które wysyłają plik cookie goth, arkusz stylów czcionek jest obsługiwany w sposób blokujący, w formie <link rel="stylesheet"> w <head> dokumentu.

Aby zobaczyć to samemu, postępuj zgodnie z tymi prostymi instrukcjami:

W Chrome, otwórz view-source:https://twitter.com/simevidas
Otwórz DevTools (F12) - > Zakładka "zasoby" - > Pliki cookie - > twitter.com, Usuń goth cookie .
Hit reload (F5). Ponieważ nagłówki żądań nie zawierały pliku cookie goth, arkusz stylów czcionek (gotham-narrow-v3.css) nie jest obecny w dokumencie head, a raczej jest ukryty kodowany HTML łańcuch JSON (pic ). Będzie on wstrzykiwany asynchronicznie przez JavaScript później.
Ponownie Sprawdź swoje pliki cookie w zakładce zasoby DevTools - samo przeładowanie strony view-source wystarczyło, aby ponownie ustawić goth cookie, ale na wszelki wypadek nie masz goth cookie po prostu otwórz stronę na Twitterze.
Teraz z ustawieniem pliku cookie goth, ponownie załaduj stronę view-source. Zauważysz, że arkusz stylów czcionek (gotham-narrow-v3.css) jest teraz dołączony za pomocą <link rel="stylesheet"> wewnątrz nagłówka dokumentu (pic ). Ten jest ładowany przed pierwszym renderowaniem, ponieważ arkusze stylów <link>ed CSS blokują renderowanie.

I oczywiście hard-refreshing (Ctrl / Cmd+F5) nadal wyśle pliki cookie i załaduje arkusz stylów czcionek w sposób blokowania.

1: początkowo uważałem, że miało to być jakieś leniwe ładowanie z wykrywaniem funkcji, ale przetestowałem to na Firefoksie 3.5 (który nie obsługuje WOFF webfonts) i Firefoksie 3.0.13 (który w ogóle nie obsługuje webfonts) i oba mają ustawione goth cookie.

Ponieważ plik cookie jest w rzeczywistości ciasteczkiem sesji (jest usuwany po zamknięciu przeglądarki), bardziej prawdopodobne jest, że pierwsze asynchroniczne wstrzyknięcie odbywa się w celu przyspieszenia pierwsze renderowanie i kolejne żądania zakładają, że arkusz stylów czcionek jest już buforowany i wstawiają go w sposób blokujący, aby zapobiec Flashowi nieużywanych treści (bardziej specyficzna forma {66]}FOUC {26]}, którą właśnie wymyśliłem).

Nie przeszedłem przez minified JS, aby mieć pewność, ale możesz edytować tę odpowiedź lub komentarz, jeśli ci się uda.

I tak, jest to temat mocno umiejscowiony, który prawdopodobnie nie pomoże wielu osobom, właśnie postanowiłem umieścić wszystko to razem w jasnej i zwięzłej odpowiedzi, aby ci, którzy są zainteresowani tym tematem, nie musieli zapuszczać się w niekończące się komentarze w pytaniu.