Wstępne zasoby są ładowane dwukrotnie.

Chcę użyć wstępnego pobierania html do wstępnego pobrania pliku czcionki. I przestrzegać zaleceń tutaj: https://css-tricks.com/prefetching-preloading-prebrowsing/Wstępne zasoby są ładowane dwukrotnie.

<!doctype html> 
<html> 
<head> 
<link rel="prefetch" href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2"> 
<style> 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 

html, body { 
font-family: 'Open Sans'; 
} 
</style> 
</head> 
<body> 
Hello world 
</body> 
</html>

Jednak plik czcionki jest faktycznie ładuje dwukrotnie na Chrome. Nie próbowałem innych przeglądarek.

Am I robić coś niepoprawnie?

Źródło

2016-03-31 Joe Frambach

Na moim Chrome 49 windows vista ono wyłącznie ładunki raz. [** tutaj jest zrzut ekranu **] (https://i.gyazo.com/26f727b39b8f57c97b57d0bb58304163.png) –

Myślę, że ładuje się dwa razy, ponieważ ładujesz go raz w tagu linku, który pokazuje się jako czcionka typu/woff2 i raz w src z czcionką, która pojawia się jako czcionka typu. Nie jestem zaznajomiony z prefetch, ale mogłem używać czcionki tylko z czcionką, ale nie potrzebowałem tagu linku. Jeśli jednak spróbuję użyć tylko znacznika łącza, bez czcionki, to załaduje on czcionkę/woff2, ale nie mógłbym użyć czcionki bez reguły z czcionką. Myślę, że tutaj chodzi o to, że ładujesz czcionkę raz w tagu linku i raz w regule czcionki, ale obecnie nie są one powiązane. – frajk

@frajk Odpowiedź nie polega na usunięciu tagu linku. W świecie rzeczywistym css jest zewnętrznym arkuszem stylów, który zawiera inny arkusz stylów, który zawiera deklarację rodziny czcionek. Jeśli każdy arkusz stylów ma nietrywialne formatowanie, ważne jest wstępne pobieranie. –

To jest nieprawidłowe użycie prefetch. Zobacz źródło: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

<link rel="prefetch"> jest dyrektywa, która informuje przeglądarkę, aby pobrać zasób, który prawdopodobnie będzie potrzebny do następnego nawigacji.

...

<link rel="subresource"> było pierwotnie planowane do walki nawigacji prąd, ale nie udało się tego zrobić w niektórych spektakularnych sposobów.

...

Podstawowym sposobem można użyć preload jest obciążenia późno odkrył zasobów wczesnych. [...] Niektóre z tych środków są ukryte w CSS i JavaScript w

Więc preload jest to, co chcemy użyć tutaj. Ale nie jest to obsługiwane, prawie wcale.

Wyrób posiada również kilka słów o czcionkach załadowczych szczególności:

coś takiego:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Jeden punkt warto się nad: Trzeba dodać atrybut crossorigin podczas pobierania czcionek, ponieważ są one pobierane przy użyciu trybu anonimowego CORS. Tak, nawet jeśli twoje czcionki pochodzą z tego samego źródła co strona. Przepraszam.

Umieszczenie że wszyscy razem, zaktualizowany kod powtarzalne wygląda następująco:

style.css:

/* 2MB of random character comment fluff */ 

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 

html, body { 
font-family: 'Open Sans'; 
}

index.html:

<!doctype html> 
<html> 
<head> 
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2"> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
Hello world 
</body> 
</html>

Teraz działa tylko w Chrome Canary.Liczę na lepsze wsparcie dla przeglądarek.

Chrome:

Kanaryjskie:

Źródło

2016-04-08 20:01:07

Wstępne zasoby są ładowane dwukrotnie.

Odpowiedz

Powiązane problemy