प्रीफ़ेच किए गए संसाधन दो बार लोड किए गए हैं

मैं फ़ॉन्ट फ़ाइल को प्रीफ़ेच करने के लिए HTML प्रीफ़ेच का उपयोग करना चाहता हूं। मैं सिफारिशों यहाँ का पालन किया: https://css-tricks.com/prefetching-preloading-prebrowsing/प्रीफ़ेच किए गए संसाधन दो बार लोड किए गए हैं

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

हालांकि, फ़ॉन्ट फ़ाइल वास्तव में दो बार क्रोम पर लोड कर रहा है। मैंने अन्य ब्राउज़रों की कोशिश नहीं की है।

Am मैं गलत तरीके से कुछ कर रही?

स्रोत

2016-03-31 Joe Frambach

मेरी क्रोम 49 Windows Vista पर यह केवल भार एक बार। [** यहां इसका एक स्क्रीनशॉट है **] (https://i.gyazo.com/26f727b39b8f57c97b57d0bb58304163.png) –

मुझे लगता है कि यह दो बार लोड हो रहा है क्योंकि आप लिंक टैग में इसे एक बार लोड कर रहे हैं, जो टाइप फ़ॉन्ट/woff2, और एक बार फ़ॉन्ट-फेस src में, जो प्रकार फ़ॉन्ट के रूप में दिखाई देता है। मैं प्रीफेच से परिचित नहीं हूं, लेकिन फ़ॉन्ट फ़ॉन्ट के साथ फ़ॉन्ट का उपयोग करने में सक्षम था, लेकिन लिंक टैग की आवश्यकता नहीं थी। हालांकि, अगर मैंने फ़ॉन्ट टैग के बिना लिंक टैग का उपयोग करने का प्रयास किया, तो उसने फ़ॉन्ट/woff2 लोड किया लेकिन मैं फ़ॉन्ट-फेस नियम के बिना फ़ॉन्ट का उपयोग नहीं कर सका। मुझे लगता है कि यह चाल यह है कि आप लिंक टैग में एक बार फ़ॉन्ट लोड कर रहे हैं और एक बार फ़ॉन्ट-फेस नियम में, लेकिन वे वर्तमान में संबंधित नहीं हैं – frajk

@frajk उत्तर लिंक टैग को हटाने का नहीं है। वास्तविक दुनिया में, सीएसएस एक बाहरी स्टाइलशीट है जिसमें '@ शामिल है एक और स्टाइलशीट जिसमें फ़ॉन्ट-पारिवारिक घोषणा शामिल है। यदि प्रत्येक स्टाइलशीट नॉनट्रिविअल फाइलसाइज का है, तो प्रीफेचिंग महत्वपूर्ण है। –

यह prefetch का गलत उपयोग है। संसाधन देखें: https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/

<link rel="prefetch"> एक निर्देश है कि एक ब्राउज़र बताता है एक संसाधन है कि शायद अगले नेविगेशन के लिए की आवश्यकता होगी लाने के लिए है।

...

<link rel="subresource"> मूल रूप वर्तमान नेविगेशन से निपटने के लिए योजना बनाई गई थी, लेकिन यह कुछ शानदार तरीके में है कि करने में नाकाम रही।

...

बुनियादी जिस तरह से आप preload इस्तेमाल कर सकते हैं जल्दीलोड देर की खोज की संसाधनों के लिए है। [...] संसाधनों में से कुछ सीएसएस में और में जावास्क्रिप्ट

छिपे हुए हैं तो, preload है क्या हम यहाँ का उपयोग करना चाहते। लेकिन, यह शायद ही कभी समर्थित नहीं है।

कुछ की तरह:

लेख में यह भी लोड हो रहा है फोंट विशेष रूप से के बारे में कुछ शब्द है

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

एक पर जाने लायक बिंदु: आप जब फोंट प्राप्त करने में कठिनाई एक crossorigin विशेषता जोड़ने के लिए है, क्योंकि वे अज्ञात मोड CORS का उपयोग कर लाए जाते हैं। हां, भले ही आपके फोंट पृष्ठ के समान मूल पर हों। माफ़ कीजिये।

लाना है कि सभी को एक साथ, अद्यतन प्रतिलिपि प्रस्तुत करने योग्य कोड लगता है:

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>

अब, यह काम करता है लेकिन केवल क्रोम कैनरी में।मैं आने वाले बेहतर ब्राउज़र समर्थन पर भरोसा कर रहा हूं।

क्रोम:

कैनरी:

स्रोत

2016-04-08 20:01:07

प्रीफ़ेच किए गए संसाधन दो बार लोड किए गए हैं

उत्तर

संबंधित मुद्दे