मुखपृष्ठ » कोडिंग » टैग के साथ वेबसाइट को कैसे गति दें

    टैग के साथ वेबसाइट को कैसे गति दें

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

    डेवलपर्स एक है बहुत अच्छा विचार है का उनकी वेबसाइटों को कैसे नेविगेट किया जाता है, और जो संसाधनों का अनुरोध सबसे अधिक बार किया जाता है और इस प्रकार, वे भविष्यवाणी कर सकते हैं कि कुछ भविष्य के संचालन ब्राउज़रों को साइटों के लिए करना चाहिए। डेवलपर्स के लिए एक रास्ता खोजने के लिए अब सभी की जरूरत है ये रिले भविष्यवाणियों ब्राउज़रों के लिए तथा उन्हें अच्छे इस्तेमाल के लिए लगाएं. यह वह जगह है जहाँ कुछ विशेष "HTML लिंक" आते हैं.

    HTTP रिक्वेस्ट पर एक रिफ्रेशर

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

    यहाँ आगे क्या होता है:

    1. जो एक वेबसाइट के ब्राउज़र के एड्रेस बार में मानवीय रूप से वापस लेने योग्य पता टाइप करता है और "एंटर" दबाता है.
    2. एक बार जब वह पता प्राप्त कर लेता है, तो ब्राउज़र जो द्वारा दिए गए पते के आईपी पते के लिए एक DNS सर्वर (आईएसपी की तारीफ) पूछता है.
    3. DNS सर्वर बाध्य करता है.
    4. अब जब ब्राउज़र आईपी पते को जानता है, तो यह वेबसाइट के सर्वर पर एक संदेश भेजता है, एक कनेक्शन के लिए पूछ रहा है.
    5. यदि सर्वर जीवित और ठीक है, तो यह ब्राउज़र के अनुरोध को स्वीकार करते हुए एक उत्तर भेजता है और ब्राउज़र सर्वर के संदेश का जवाब और स्वीकार करता है। (ध्यान दें: हाँ, यह एक क्लाइंट और सर्वर के बीच एक टीसीपी हैंडशेक का एक अत्यंत पानी वाला संस्करण है।)
    6. जब हैंडशेक खत्म हो जाते हैं, तो दोनों के बीच एक संबंध स्थापित हो जाता है.
    7. अब, ब्राउज़र अपनी बोली शैली को HTTP में बदलता है और वेबसाइट के लिए सर्वर पूछता है.
    8. सर्वर, वेबसाइट के होम पेज को जानने के बाद, जो ब्राउज़र द्वारा प्राप्त किया जाता है और जो जो कंप्यूटर के सामने बहुत धैर्य से इंतजार कर रहा है, उसे दिखाया जाता है।.

    एक सामान्य HTTP अनुरोध के माध्यम से चला जाता है सब वह (और अधिक) इंटरनेट के माध्यम से एक दस्तावेज़ लाने के लिए। तो अगर इनमें से कोई भी प्रक्रिया जब संभव हो तो जम्पस्टार्ट किया जा सकता है, हम कर सकते हैं हमें जो संसाधन चाहिए, उसके वितरण के लिए हमें समय कम करना होगा.

    HTML लिंक संबंध

    W3C 4 HTML लिंक संबंध निर्दिष्ट करता है (rel नाम के लिए) नाम DNS-प्रीफ़ेच, प्रीकनेक्ट, प्रीफ़ेच, तथा prerender. साथ में उन्हें (W3C द्वारा) "" कहा जाता हैसंसाधन संकेत"अब, हम देखेंगे वे क्या कर सकते हैं तथा जहाँ उनका उपयोग किया जा सकता है.

    1. DNS प्रीफ़ेच

    DNS प्रीफ़ैच में, डोमेन नाम संकल्प (DNS सर्वर से मैचिंग आईपी एड्रेस पाने वाला उर्फ) समय से पहले किया जाता है.

    मान लीजिए कि एक वेबसाइट में एक संदर्भ पृष्ठ है, जिसमें बहुत सारे संदर्भ लिंक हैं जो अपनी बहन साइट पर हैं। जब कोई उपयोगकर्ता संदर्भ पृष्ठ पर जाता है, तो ए उच्च संभावना उपयोगकर्ता बहन साइट पर नेविगेट करेगा। तो, ए डीएनएस लुकअप बहन साइट के लिए साइट को खोलने में लगने वाले समय को कम कर सकती है (जिससे उपयोगकर्ता अनुभव में सुधार होगा).

    इस DNS प्रीफ़ैचिंग के माध्यम से विलंबता में कमी इस कोड को संदर्भ पृष्ठ में जोड़कर किया जा सकता है.

     

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

    इसलिए जब कोई उपयोगकर्ता अंततः उन लिंक में से एक पर क्लिक करता है जो उन्हें बहन साइट पर ले जाता है, तो उस साइट का DNS रिज़ॉल्यूशन पहले ही पूरा हो सकता है, और ब्राउज़र तुरंत बहन साइट के साथ क्लाइंट-सर्वर टीसीपी कनेक्शन स्थापित करना शुरू कर सकता है। सर्वर, जिससे पेज लोड तेजी से होता है.

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

    2. पूर्वपरिभाषित

    Preconnect DNS प्रीफ़ैच से एक कदम आगे है, यह सर्वर से एक कनेक्शन स्थापित करता है जिसके लिए भविष्य में एक अनुरोध भेजा जा सकता है.

    W3C प्री-कट के लिए एक आदर्श उपयोग के मामले को सूचीबद्ध करता है: रीडायरेक्ट. डेवलपर्स कई कारणों से पुनर्निर्देशन का उपयोग करते हैं.

    इस मामले में, एक ब्राउज़र का अगला अनुरोध (पुनर्निर्देशित साइट) है 100% पूर्वानुमान है, और भी के लिए preconnected हो, सेवा मेरे नेविगेशन विलंबता कम करें.

    कल्पना करें कि एक मध्यस्थ साइट पृष्ठ है जो "पर पुनर्निर्देशित करता है"xyzsite", निम्न HTML लिंक ब्राउज़र को एक्ससाइट सर्वर के साथ प्रीकनेक्ट करेगा, जब यह उस मध्यस्थ पृष्ठ पर पहुंच जाता है.

     

    मार्च 2016 तक, यह क्रोम, ओपेरा और फ़ायरफ़ॉक्स में उपलब्ध है.

    3. प्रीफैच

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

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

    ऑनलाइन पुस्तकों, दीर्घाओं, या विभागों के लिए, यदि उपयोगकर्ता को अगले पृष्ठ पर ब्राउज़ करने की संभावना है, तो संसाधनों को प्रीफ़ेट करना इमेजिस, चीजों को तेजी से बढ़ा सकते हैं। यह करने के लिए कोड है.

     

    Prefetch क्रोम, फ़ायरफ़ॉक्स और ओपेरा में समर्थित है.

    4. पूर्वज

    केवल HTML पृष्ठों के लिए ही पूर्व-भुगतान किया जा सकता है। एक पूर्व-निर्धारित HTML पृष्ठ है ऑफ़लाइन प्रदान किया गया, और स्क्रीन पर तब चित्रित किया जाता है जब उपयोगकर्ता को वास्तव में इसकी आवश्यकता होती है। प्रतिपादन एक उच्च कम्प्यूटेशनल काम और स्मृति संसाधन की लागत; इसके अलावा, एक पेज रेंडर करने के लिए, ब्राउज़र को अतिरिक्त संसाधनों (जैसे पेज पर जोड़े गए चित्र) की आवश्यकता हो सकती है, जिसके लिए नेतृत्व करना होगा अधिक परिणामी अनुरोध ब्राउज़र द्वारा.

    इसलिए, prerender होना ही पड़ेगा सावधानी के साथ प्रयोग किया जाता है, और अधिक इस्तेमाल नहीं किया। निम्नलिखित कोड जोड़ने से पहले के बारे में "पृष्ठ" पहले से प्रस्तुत हो जाएगा.

     

    मार्च 2016 तक क्रोम, IE और ओपेरा में पहले से ही उपलब्ध है.

    नोट करने के लिए कुछ चीजें

    (1) उपर्युक्त संसाधन संकेतों में से कोई भी इसके लिए किए गए अनुरोध के विभिन्न चरणों के निष्पादन और पूर्णता की गारंटी नहीं देता है क्योंकि जब ब्राउज़र पहले से ही व्यस्त है तो वर्तमान पृष्ठ के संचालन के लिए आवश्यक अनुरोधों को संसाधित करने में उपयोगकर्ता इन अनुकूलन कर रहा है। उपयोगकर्ता के वर्तमान कार्यों में बाधा डाल सकता है.

    तो, सब कुछ है पंक्तिबद्ध और निष्पादित जब ब्राउज़र ऐसा करने के लिए पर्याप्त स्वतंत्र महसूस करता है.

    ये संसाधन संकेत जरूरी नहीं कि पेज लोड होने से पहले ही पेज में मौजूद हों। वे जा सकते हैं जावास्क्रिप्ट द्वारा बाद में जोड़ा गया, और संसाधन संकेत हमेशा की तरह अपना काम करेंगे.

    (2) W3C निर्दिष्ट करता है a HTML लिंक विशेषता बुलाया संकेत की संभावना, जनसंपर्क (मूल्य 0 से 1 के साथ) इन संसाधन संकेत के लिए, जिसका उपयोग भविष्य में किए जाने वाले अनुरोधों की संभावना प्रदान करने के लिए किया जा सकता है। मैंने इस विशेषता को अभी तक किसी भी ब्राउज़र द्वारा कार्यान्वित नहीं किया है। एक उदाहरण के रूप में, निम्नलिखित कोड में कहा गया है कि भविष्य में 80% संभावना xyzsite का अनुरोध किया जाएगा और लगभग 30% इस पृष्ठ के लिए.

     

    लिंक किए गए अनुरोध के CORS क्रेडेंशियल के ब्राउज़र को सूचित करने के लिए हम संसाधन संकेत में वैकल्पिक क्रॉसऑरिजिन विशेषता भी जोड़ सकते हैं.