प्रीफ़ेच करना, पहले से रेंडर करना, और सर्विस वर्कर प्रीकैशिंग

अंतिम कुछ मॉड्यूल में, आपको डेफ़रिंग JavaScript और लेज़ी लोडिंग इमेज और <iframe> एलिमेंट का लोड होना. संसाधन लोड होने में देरी से, शुरुआती प्रोसेस के दौरान नेटवर्क और सीपीयू का इस्तेमाल कम हो जाता है पेज लोड को ज़रूरत के समय संसाधनों को डाउनलोड करके, पर लोड करने की ज़रूरत नहीं पड़ेगी, क्योंकि इससे उनका इस्तेमाल इस्तेमाल नहीं किया जा सकेगा. इससे शुरुआती पेज लोड होने की अवधि में सुधार हो सकता है, लेकिन बाद के इंटरैक्शन पर असर पड़ सकता है अगर उन्हें चलाने के लिए ज़रूरी संसाधन उस समय पर लोड नहीं हुए हैं, तो एक देरी होगी वे होते हैं.

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

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

आने वाले समय में ज़रूरी संसाधनों को कम प्राथमिकता पर प्रीफ़ेच करें

पहले से ही संसाधन फ़ेच किए जा सकते हैं—जैसे कि इमेज, स्टाइलशीट, या JavaScript संसाधनों को ऐक्सेस करने के लिए, <link rel="prefetch"> संसाधन संकेत का इस्तेमाल करें. कॉन्टेंट बनाने prefetch संकेत से ब्राउज़र को पता चलता है कि इसके लिए किसी संसाधन की ज़रूरत हो सकती है आने वाले समय में मदद मिल सकती है.

जब prefetch संकेत दिया गया हो, तो ब्राउज़र अनुरोध कर सकता है संसाधनों के साथ मुकाबला करने से बचने के लिए, उस संसाधन को सबसे कम प्राथमिकता पर रखें मौजूदा पेज के लिए ज़रूरी है.

संसाधन प्रीफ़ेच करने से उपयोगकर्ता अनुभव बेहतर हो सकता है, क्योंकि उपयोगकर्ता ऐसा नहीं करता आने वाले समय में ज़रूरी संसाधनों को डाउनलोड करने तक इंतज़ार करना होगा, क्योंकि उन्हें ज़रूरत के समय डिस्क कैश से तुरंत वापस लाया जा सकता है.

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

पिछला एचटीएमएल स्निपेट, ब्राउज़र को यह बताता है कि वह प्रीफ़ेच कर सकता है डिवाइस कुछ समय से इस्तेमाल में न होने पर, date-picker.js और date-picker.css. यह भी मुमकिन है कि जब उपयोगकर्ता पेज से इंटरैक्ट करता है, तब डाइनैमिक तौर पर रिसॉर्स प्रीफ़ेच करते हैं JavaScript.

prefetch, Safari को छोड़कर सभी मॉडर्न ब्राउज़र पर काम करता है—जहां यह फ़्लैग के पीछे मौजूद होता है. अगर आपको पेजों को पहले से लोड करना ज़रूरी है, तो संसाधनों को इस तरह से उपलब्ध कराना है जो सभी ब्राउज़र में काम करे—और आप सर्विस वर्कर—इसके बाद, इस मॉड्यूल में बाद के सेक्शन को प्रीकैशिंग के बारे में पढ़ें सर्विस वर्कर का इस्तेमाल करने वाले संसाधन.

आने वाले समय में नेविगेशन को तेज़ करने के लिए, पेजों को प्रीफ़ेच करें

यह भी बताया जा सकता है कि किसी पेज और उसके सभी उप-संसाधनों को प्रीफ़ेच किया जा सकता है एचटीएमएल दस्तावेज़ के बारे में बताते समय as="document" एट्रिब्यूट:

<link rel="prefetch" href="/page" as="document">

अगर ब्राउज़र कुछ समय से इस्तेमाल में नहीं है, तो हो सकता है कि वह /page के लिए कम प्राथमिकता वाला अनुरोध करे.

Chromium पर आधारित ब्राउज़र में, दस्तावेज़ों को प्रीफ़ेच करने के लिए, अनुमान लगाने से जुड़े नियम एपीआई. अनुमान लगाने के नियम, JSON ऑब्जेक्ट के तौर पर बताए गए हैं इसे पेज के एचटीएमएल में शामिल किया जाता है या JavaScript की मदद से डाइनैमिक तौर पर जोड़ा जाता है:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

JSON ऑब्जेक्ट, एक या उससे ज़्यादा कार्रवाइयों के बारे में बताता है—फ़िलहाल, सिर्फ़ काम करता है prefetch और prerender—और उस कार्रवाई से जुड़े यूआरएल की सूची. तय सीमा में तो ब्राउज़र को पिछले एचटीएमएल स्निपेट को प्रीफ़ेच करने का निर्देश दिया जाता है /page-a और /page-b. <link rel="prefetch"> की तरह, अनुमान लगाने के नियम इससे पता चलता है कि कुछ खास परिस्थितियों में ब्राउज़र इसे अनदेखा कर सकता है.

Quicklink जैसी लाइब्रेरी, पेज नेविगेशन को डाइनैमिक तरीके से बेहतर बनाती हैं आपकी साइट के पेजों में दिखने वाले लिंक, उपयोगकर्ता का व्यूपोर्ट. इससे इस बात की संभावना बढ़ जाती है कि उपयोगकर्ता पेज पर मौजूद सभी लिंक को प्रीफ़ेच करने की तुलना में, उस पेज पर ले जाता है.

प्रीरेंडरिंग पेज

संसाधनों को प्रीफ़ेच करने के अलावा, ब्राउज़र से हिंट भी दिया जा सकता है उपयोगकर्ता के नेविगेट किए जाने से पहले पेज को पहले से रेंडर करने के लिए. इससे करीब-करीब पेज तुरंत लोड हो जाता है, क्योंकि पेज और उसके रिसॉर्स को फ़ेच और प्रोसेस किया जाता है बैकग्राउंड. जब उपयोगकर्ता उस पेज पर जाता है, तो पेज को होता है.

अनुमान लगाने के नियम, एपीआई के ज़रिए प्रीरेंडरिंग की सुविधा काम करती है:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>

डेमो को प्रीफ़ेच और प्रीरेंडर करना

सर्विस वर्कर को पहले से कैश मेमोरी में सेव किया जा रहा है

सर्विस वर्कर का इस्तेमाल करके, संसाधनों को अनुमान के हिसाब से प्रीफ़ेच किया जा सकता है. सर्विस वर्कर को पहले से कैश मेमोरी में सेव करने की सुविधा, Cache एपीआई का इस्तेमाल करके संसाधनों को फ़ेच और सेव कर सकती है, इससे ब्राउज़र को Cache API का इस्तेमाल करके, अनुरोध करने की अनुमति मिलती है. नेटवर्क. सर्विस वर्कर को पहले से कैश मेमोरी में सेव करने की सुविधा, एक बहुत ही असरदार सर्विस वर्कर का इस्तेमाल करती है कैश मेमोरी में सेव करने की रणनीति, जिसे सिर्फ़ कैश मेमोरी से जुड़ी रणनीति के नाम से जाना जाता है. यह पैटर्न बहुत मुश्किल है यह असरदार है, क्योंकि सर्विस वर्कर कैश में संसाधन डालने के बाद, अनुरोध करने पर, उन्हें तुरंत फ़ेच किया जाता है.

सर्विस वर्कर को पेज से सर्विस वर्कर और कैश मेमोरी में सेव करने का फ़्लो दिखाता है.
केवल-कैश-ओनली कार्यनीति कभी भी सर्विस वर्कर इंस्टॉलेशन के दौरान नेटवर्क. इंस्टॉल हो जाने के बाद, कैश मेमोरी में सेव की गई संसाधन कभी भी सर्विस वर्कर कैश से ही हासिल किए जाते हैं.

सर्विस वर्कर की मदद से, संसाधनों को पहले से कैश मेमोरी में सेव करने के लिए, वर्कबॉक्स का इस्तेमाल किया जा सकता है. अगर आपको हालांकि, आप पहले से तय सेट को कैश करने के लिए अपना खुद का कोड लिख सकते हैं फ़ाइलें शामिल हैं. दोनों में से किसी भी तरीके से, आप प्रीकैश मेमोरी के लिए सर्विस वर्कर का इस्तेमाल करने के बारे में सोच सकते हैं ज़रूरी है, तो यह जानना ज़रूरी है कि पहले से कैश मेमोरी में सेव करने की प्रोसेस तब होती है, जब वर्कर इंस्टॉल है. इंस्टॉलेशन के बाद, प्रीकैश किए गए रिसॉर्स फिर आपकी वेबसाइट के किसी भी पेज पर रिकवरी के लिए उपलब्ध है.

Workbox एक प्री-कैश मेमोरी मेनिफ़ेस्ट का इस्तेमाल करके यह तय करता है कि किन संसाधनों को रखना चाहिए प्री-कैश किया गया. प्रीकैश मेनिफ़ेस्ट, फ़ाइलों की सूची और वर्शन की जानकारी होती है जो "सच्चे स्रोत" के तौर पर काम करता है इस्तेमाल करें, ताकि संसाधनों को प्रीकैश किया जा सके.

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

ऊपर दिया गया कोड, मेनिफ़ेस्ट का एक उदाहरण है. इसमें दो फ़ाइलें शामिल हैं: script.ffaa4455.js और /index.html. अगर किसी संसाधन में वर्शन शामिल है, तो जानकारी को फ़ाइल में दर्ज करें (जिसे फ़ाइल हैश भी कहा जाता है) और फिर revision प्रॉपर्टी को null में छोड़ा जा सकता है, क्योंकि फ़ाइल का वर्शन पहले से ही मौजूद है (उदाहरण के लिए, ऊपर दिए गए कोड में script.ffaa4455.js संसाधन के लिए ffaa4455). इसके लिए वर्शन न हों, तो बिल्ड के समय उनके लिए संशोधन जनरेट किया जा सकता है.

सेट अप होने के बाद, सर्विस वर्कर का इस्तेमाल, स्टैटिक पेजों या उनके सबसंसाधनों का इस्तेमाल करके, बाद के पेज नेविगेशन की रफ़्तार को तेज़ किया जा सकता है.

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

उदाहरण के लिए, किसी ई-कॉमर्स प्रॉडक्ट लिस्टिंग पेज पर, सर्विस वर्कर का इस्तेमाल किया जा सकता है ताकि प्रॉडक्ट की जानकारी वाले पेज को रेंडर करने के लिए, ज़रूरी सीएसएस और JavaScript को पहले से कैश मेमोरी में सेव किया जा सके. इससे प्रॉडक्ट की जानकारी वाले पेज पर तेज़ी से नेविगेट किया जा सकता है. इस पिछले उदाहरण में, product-page.ac29.css और product-page.39a1.js प्री-कैश किया गया. workbox-precaching में उपलब्ध precacheAndRoute तरीका यह पक्का करने के लिए कि पहले से कैश मेमोरी में सेव किए गए संसाधन मौजूद हैं, ज़रूरी हैंडलर को अपने-आप रजिस्टर कर देता है इन्हें सर्विस वर्कर एपीआई से फ़ेच किया जाता है.

सर्विस वर्कर ज़्यादातर काम करते हैं. इसलिए, सर्विस वर्कर का इस्तेमाल किया जा सकता है किसी मॉडर्न ब्राउज़र पर पहले से कैश मेमोरी में सेव करना शुरू किया जाता है, जहां पर स्थिति की ज़रूरत होती है.

अपने ज्ञान को परखें

prefetch संकेत किस प्राथमिकता से जनरेट होता है?

ज़्यादा.
फिर से कोशिश करें.
मध्यम.
फिर से कोशिश करें.
कम.
सही!

प्रीफ़ेचिंग और पहले से मौजूद डेटा को फ़ेच करने में क्या अंतर है क्या आपको किसी पेज को पहले रेंडर करना है?

जब किसी पेज का प्रीफ़ेच और प्रीरेंडरिंग, दोनों एक पेज को शामिल करते हैं और सभी प्रीफ़ेच करता है, जो प्रीफ़ेच की वजह से सिर्फ़ पेज और उसके सभी संसाधन शामिल होते हैं, जबकि प्रीरेंडरिंग, तब तक बैकग्राउंड में पूरा पेज दिखता रहेगा, जब तक उपयोगकर्ता इस पर नहीं पहुंचता.
सही!
वे ज़्यादातर एक जैसे ही होते हैं. सिर्फ़ प्रीरेंडरिंग से सबरिसॉर्स तक पहुँचा करते हैं, जबकि प्रीफ़ेच नहीं होता है.
फिर से कोशिश करें.

सर्विस वर्कर की कैश मेमोरी और एचटीटीपी कैश मेमोरी एक ही है.

सही
फिर से कोशिश करें.
गलत
सही!

अगला लेख: वेब वर्कर के बारे में खास जानकारी

अब आपको पता है कि प्रीफ़ेच, प्रीरेंडरिंग, और सर्विस वर्कर को कैसे प्रीकैश किया जाता है तब फ़ायदेमंद हो सकता है, जब आने वाले समय में नेविगेशन की रफ़्तार को तेज़ करने की बात हो तब आपको इस बारे में सोच-समझकर फ़ैसला लेने की सुविधा मिलती है कि आपकी वेबसाइट और उसके उपयोगकर्ताओं के लिए फ़ायदेमंद है.

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