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

Jeff Posnick

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

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