लिंक 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"> के लिए सहायता हटा दी गई है.