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

Jeff Posnick

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

<link rel="preload"> के ज़रिए लोड किए गए रिसॉर्स, ब्राउज़र में लोकल तौर पर सेव किए जाते हैं. साथ ही, वे तब तक काम नहीं करते, जब तक कि डीओएम, JavaScript या सीएसएस में उनका रेफ़रंस नहीं दिया जाता. उदाहरण के लिए, यहां एक संभावित इस्तेमाल का उदाहरण दिया गया है. इसमें स्क्रिप्ट फ़ाइल को पहले से लोड किया गया है, लेकिन उसे तुरंत लागू नहीं किया गया है. ऐसा तब होता है, जब इसे डीओएम में <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"> का इस्तेमाल करने के बारे में Yoav Weiss ने सबसे बेहतर गाइड लिखी है. अगर आपको इस बारे में जानना है और अपने पेजों पर इसका इस्तेमाल करना है, तो हमारा सुझाव है कि आप इस लेख को पढ़ें. इससे आपको इसके फ़ायदों और क्रिएटिव इस्तेमाल के उदाहरणों के बारे में ज़्यादा जानकारी मिलेगी.

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