लिंक relOR#39;preload' के साथ अपने संसाधनों को प्राथमिकता देना

Jeff Posnick

क्या आपने कभी भी ब्राउज़र को किसी महत्वपूर्ण फ़ॉन्ट, स्क्रिप्ट या किसी अन्य संसाधन की ज़रूरत होती है, जिसकी ज़रूरत पेज को onload इवेंट? <link rel="preload"> की मदद से वेब डेवलपर को इसके लिए, कुछ मुख्य एट्रिब्यूट के साथ एक जाने-पहचाने एचटीएमएल एलिमेंट सिंटैक्स का इस्तेमाल करके सटीक व्यवहार का पता लगाएं. यह है ड्राफ़्ट स्टैंडर्ड है, जो Chrome 50 की रिलीज़.

<link rel="preload"> की मदद से लोड किए गए रिसॉर्स, ब्राउज़र में सेव किए जाते हैं, साथ ही, ये तब तक काम नहीं करते हैं, जब तक कि उनका रेफ़रंस DOM, JavaScript या सीएसएस. उदाहरण के लिए, यहां इस्तेमाल का एक संभावित उदाहरण दिया गया है. इसमें स्क्रिप्ट फ़ाइल पहले से लोड किया गया, लेकिन तुरंत एक्ज़ीक्यूट नहीं किया गया, जैसा कि यह होता अगर को DOM में <script> टैग के ज़रिए शामिल किया गया है.

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

यहां क्या हो रहा है? इस उदाहरण में इस्तेमाल की गई href एट्रिब्यूट को वेब डेवलपर के लिए जाने-पहचाने हों, क्योंकि यह एक स्टैंडर्ड एट्रिब्यूट है. इसका इस्तेमाल, किसी लिंक किए गए संसाधन का यूआरएल होता है.

यह as एट्रिब्यूट है शायद आपके लिए नई हो. साथ ही, ऐसा हो सकता है कि इसका इस्तेमाल <link> एलिमेंट के संदर्भ में किया गया हो ब्राउज़र को इस बारे में ज़्यादा जानकारी देनी होगी कि का डेस्टिनेशन पहले से लोड करने का अनुरोध किया जा रहा है. इस अतिरिक्त जानकारी से यह पक्का होता है कि ब्राउज़र उचित अनुरोध हेडर सेट करेगा, प्राथमिकता का अनुरोध करेगा, और साथ ही लागू करेगा कॉन्टेंट की सुरक्षा के बारे में नीति ऐसे डायरेक्टिव जो संसाधन के सही संदर्भ के लिए अपनाए जा सकते हैं.

ज़्यादा जानें

योव वैस ने लिखा तय करने वाली गाइड <link rel="preload"> का इस्तेमाल करने के लिए. अगर आपको इसके बारे में जानकारी है और आपको इसका इस्तेमाल शुरू करना है तो मेरा सुझाव है कि आप ज़्यादा जानकारी पाने के लिए, के फ़ायदे और क्रिएटिव इस्तेमाल के उदाहरण.

<link rel="preload">, <link rel="subresource"> की जगह ले रहा है, जिसने अहम गड़बड़ियां और कमियां, और जिसे Chrome के अलावा किसी और ब्राउज़र में लागू नहीं किया गया था. जैसे, Chrome 50 के लिए सहायता हटाता है <link rel="subresource">.