URL को पेज रीलोड किए बिना कैसे बदलें: अनुकूलन और प्रदर्शन

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

परिचय: बिना रीलोड के URL बदलना क्यों एक सुपरपावर है

\n\n

कल्पना करें: आप एक आधुनिक वेब सेवा खोलते हैं - मान लीजिए, एक ईमेल क्लाइंट या ऑनलाइन दस्तावेज़ संपादक। आप फ़ोल्डर्स के बीच स्विच करते हैं, ईमेल खोलते हैं, सेटिंग्स बदलते हैं - और पेज रीलोड नहीं होता। इस बीच, ब्राउज़र का एड्रेस बार बदलता है, 'पीछे' और 'आगे' बटन काम करते हैं, और बुकमार्क सही स्थिति सहेजते हैं। यह कैसे काम करता है? पेज को रीलोड किए बिना URL संशोधन का जादू।

\n\n

यह सिर्फ एक 'फीचर' नहीं है - यह उच्च-प्रदर्शन वाले सिंगल-पेज एप्लिकेशन (SPA) का आधार है। एक समय में, डेवलपर्स हैश (#) का उपयोग करते थे, लेकिन यह भद्दा और असुविधाजनक था। आज हमारे पास History API है - एक शक्तिशाली उपकरण जो आपको बिना किसी झिलमिलाहट, बिना स्थिति खोए, बिना अनावश्यक HTTP अनुरोधों के तुरंत URL बदलने की अनुमति देता है।

\n\n

इस लेख में, हम देखेंगे कि pushState और replaceState कैसे काम करते हैं, वे प्रदर्शन को कैसे प्रभावित करते हैं, और अनुकूलन करते समय गलतियों से कैसे बचें। चलिए शुरू करते हैं!

\n\n

मूल बातें: History API और इसकी विधियाँ

\n\n

HTML5 विनिर्देश ने हमें window.history इंटरफ़ेस दिया। बिना रीलोड के URL बदलने के लिए दो मुख्य विधियाँ हैं - pushState और replaceState।

\n\n

pushState - इतिहास में एक नई प्रविष्टि जोड़ें

\n\n

pushState ब्राउज़र के इतिहास में एक नई प्रविष्टि बनाता है। उपयोगकर्ता 'पीछे' बटन दबाकर पिछले URL पर वापस जा सकता है।

\n\n

// सिंटैक्स\nhistory.pushState(state, title, url);\n\n// उदाहरण\nhistory.pushState({ page: 1 }, 'होम', '/home');\n

\n\n

पैरामीटर:

state - इस प्रविष्टि से जुड़ा डेटा ऑब्जेक्ट। आप कोई भी सीरियलाइज़ेबल डेटा स्टोर कर सकते हैं (जैसे, फ़िल्टर की स्थिति, एलिमेंट का ID)।
title - पेज का शीर्षक (अधिकांश ब्राउज़र इसे अनदेखा करते हैं, लेकिन खाली स्ट्रिंग या सार्थक टेक्स्ट देना बेहतर है)।
url - नया URL। यह रिलेटिव या एब्सोल्यूट होना चाहिए, लेकिन उसी origin (प्रोटोकॉल + डोमेन + पोर्ट) के भीतर होना चाहिए।

\n\n

replaceState - वर्तमान प्रविष्टि को बदलें

\n\n

replaceState इतिहास में वर्तमान प्रविष्टि को बदलता है, कोई नई प्रविष्टि नहीं बनाता। उपयोगकर्ता पिछले URL पर 'पीछे' नहीं जा सकेगा - इसे बदल दिया जाएगा।

\n\n

// सिंटैक्स\nhistory.replaceState(state, title, url);\n\n// उदाहरण - फ़िल्टर बदलने पर URL अपडेट करें\nfunction applyFilter(filterName) {\n  history.replaceState({ filter: filterName }, '', `?filter=${filterName}`);\n  updateUI(filterName);\n}\n

\n\n

popstate - इतिहास में बदलाव सुनें

\n\n

जब उपयोगकर्ता 'पीछे' या 'आगे' बटन दबाता है, तो ब्राउज़र popstate इवेंट उत्पन्न करता है। महत्वपूर्ण: pushState और replaceState इस इवेंट को ट्रिगर नहीं करते - इसे अलग से संभालना होगा।

\n\n

window.addEventListener('popstate', function(event) {\n  if (event.state) {\n    // event.state से डेटा का उपयोग करके स्थिति पुनर्स्थापित करें\n    restorePageState(event.state);\n  } else {\n    // यदि state खाली है - संभवतः उपयोगकर्ता हमारे एप्लिकेशन की सीमा से बाहर चला गया\n    loadDefaultState();\n  }\n});\n

\n\n

प्रदर्शन अनुकूलन: क्या जानना महत्वपूर्ण है

\n\n

URL संशोधन तेज़ है। लेकिन कुछ बारीकियाँ हैं जो सुपरपावर को बग का स्रोत बना सकती हैं।

\n\n

1. pushState को बहुत बार कॉल न करें

\n\n

प्रत्येक pushState कॉल इतिहास में एक प्रविष्टि जोड़ता है। यदि आप इसे हर माउस मूवमेंट या खोज में हर अक्षर पर कॉल करते हैं - तो इतिहास फूल जाएगा, और उपयोगकर्ता को फ़िल्टर से बाहर निकलने के लिए 100 बार 'पीछे' दबाना होगा। मध्यवर्ती स्थितियों के लिए replaceState का उपयोग करें, और तार्किक रूप से पूर्ण क्रियाओं (जैसे, नया पेज खोलना) के लिए pushState का उपयोग करें।

\n\n