Le risorse prefetched vengono caricate due volte

<!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>

Tuttavia, il file di carattere è effettivamente caricando due volte su Chrome. Non ho provato altri browser.

sto facendo qualcosa di sbagliato?

fonte

2016-03-31 Joe Frambach

Sul mio Chrome 49 di Windows Vista esso soltanto carichi una volta. [** Ecco uno screenshot di esso **] (https://i.gyazo.com/26f727b39b8f57c97b57d0bb58304163.png) –

Penso che stia caricando due volte perché lo stai caricando una volta nel tag link, che si presenta come tipo di carattere/woff2, e una volta nella src font-face, che si presenta come font type. Non ho familiarità con Prefetch, ma sono stato in grado di usare il font con il carattere-face, ma non ho avuto bisogno del tag link. Tuttavia, se ho provato ad usare solo il tag link, senza il font-face, ha caricato il font/woff2 ma non ho potuto usare il font senza la regola font-face. Penso che il trucco qui sia che stai caricando il font una volta nel tag link e una volta nella regola font-face, ma al momento non sono correlati – frajk

@frajk La risposta non è rimuovere il tag link. Nel mondo reale, il css è un foglio di stile esterno che '@ include's un altro foglio di stile che include la dichiarazione font-family. Se ogni foglio di stile è di dimensioni file non banali, il precaricamento è importante. –

Si tratta di un uso non corretto di prefetch. Vedere la risorsa: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

<link rel="prefetch"> è una direttiva che indica un browser per andare a prendere una risorsa che sarà probabilmente necessario per il prossimo navigazione.

...

<link rel="subresource"> è stato originariamente progettato per affrontare la navigazione corrente, ma non è riuscito a farlo in qualche modo spettacolare.

...

Il modo di base è possibile utilizzare preload è quello di caricare le risorse tardo-scoperto primi. [...] Alcune delle risorse sono nascosti in CSS e JavaScript in

Quindi, preload è quello che vogliamo usare qui. Ma non è supportato, quasi nulla.

L'articolo ha anche alcune parole circa i caratteri di carico in particolare:

qualcosa di simile:

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

Un punto pena di andare oltre: È necessario aggiungere un attributo crossorigin durante il recupero i font, come vengono recuperati utilizzando la modalità anonima CORS. Sì, anche se i tuoi font sono sulla stessa origine della pagina. Scusate.

Mettendo tutto insieme, il codice riproducibili aggiornato assomiglia:

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>

Ora funziona, ma solo in Chrome Canary.Sto contando su un supporto browser migliore imminente.

Chrome:

Canary:

fonte

2016-04-08 20:01:07

Le risorse prefetched vengono caricate due volte

risposta

Problemi correlati