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

जेफ़ पॉस्निक
जेफ़ पॉस्निक
Twitter GitHub होम पेज

क्या आपने कभी पेज के 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"> इस्तेमाल करने के बारे में तय गाइड लिखा है. अगर आपको इसके बारे में जानना है और अपने पेजों पर इसका इस्तेमाल शुरू करना है, तो हमारा सुझाव है कि फ़ायदे पाने और क्रिएटिव इस्तेमाल के उदाहरणों के बारे में ज़्यादा जानने के लिए, उनके लेख को पढ़ें.

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