DOM क्या है? वो क्या खाता है?

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

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

चीजों को करने के मूल तरीके का उपयोग करने और इसे तेजी से करने का एक सरल तरीका, वेनिला जेएस से टेक्स्टकंटेंट का उपयोग करना है। हाँ मुझे पता है। अधिकांश समय हमें उन घटकों के लिए जीवन के एक जटिल चक्र की आवश्यकता होती है जो इतने गतिशील और परिवर्तनशील होते हैं कि हमें राज्य प्रबंधन आदि का उपयोग करने की आवश्यकता होती है। लेकिन हमेशा ऐसा ही नहीं होता है। यदि आप प्रति सत्र केवल एक बार कुछ पाठ बदल रहे हैं या कुकी अपडेट कर रहे हैं, तो क्या आपको वास्तव में ऐसे जटिल तर्क और संसाधन भूखे विकल्प का उपयोग करने की आवश्यकता है?

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

क्यों?

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

मैंने हाल ही में बिना किसी निर्भरता के जावास्क्रिप्ट में कोडिंग करके, एक चुनौती और सीखने के अनुभव के रूप में बहुत कुछ सीखा। जैसे डेटा प्राप्त करना और केवल HTML, CSS और जावास्क्रिप्ट के साथ एक कार्यशील ऐप बनाना। कोई एनपीएम नहीं, कोई लाइब्रेरी नहीं। और मुझे वेब एपीआई की पद्धति और ऑब्जेक्ट का एक समूह मिला जिसके बारे में मैंने पहले कभी नहीं सुना था, जैसे कि DocumentFragment ऑब्जेक्ट। यह DOM संरचना का एक खाली 'टुकड़ा' बनाता है और आपको पृष्ठ के DOM को वास्तव में बदलने से पहले इसमें हेरफेर करने और इसे पॉप्युलेट करने देता है। तो आप अपने मेनू की सूची या अपने सुपर फैंसी एआई संचालित टूल के शीर्षकों के साथ एक ऑब्जेक्ट को लोड करते हैं, और आपके द्वारा संलग्न संचालन और नेस्टिंग टैग के साथ काम पूरा करने के बाद, आप इसे एक बार DOM पर पैच कर देते हैं। इस तरह से कि कई समान कॉलों के साथ लूप के लिए पार्सिंग करने के बजाय, पार्सिंग केवल एक बार होती है, और प्रत्येक कॉल के अंत में पेड़ की एक नई पार्सिंग की आवश्यकता होती है।

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

किसी ने ने लिखा है और कहता है कि यह सबसे अच्छा विकल्प है।

यदि आप अपने प्रोजेक्ट को सक्रिय करने के लिए पहले से ही इन पैकेजों और पुस्तकालयों को स्थापित कर रहे हैं, तो इसकी जांच क्यों न करें कि त्रुटियां और अपवाद कंसोल पर अज्ञात फ़ंक्शन कॉल या गुप्त संदेश क्यों फैलाते हैं?

निष्कर्ष और कुछ अतिरिक्त प्रलाप

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

कोई भी, इंटरनेट पर कहीं भी, हमेशा यह नहीं जान पाएगा कि एक निर्धारित पुस्तकालय या हुड के नीचे एक संपूर्ण ढांचा क्या करता है, लेकिन जितना अधिक आप जानते हैं कि चीजें कैसे काम करती हैं, उतना ही अधिक आप अधिक जानकारीपूर्ण निर्णय लेने और कुशलता से काम करने में सक्षम होंगे।

वेब विकास के लिए सबसे लोकप्रिय फ्रेमवर्क वास्तव में री-रेंडरिंग को अनुकूलित करने और वर्चुअल डोम जैसे संसाधनों का उपयोग करके डीओएम में हेरफेर करने या डेटा पुनर्प्राप्त करने वाले बहुत मांग वाले संचालन के लिए कुछ प्रकार की दृढ़ता को लागू करने के लिए काफी अच्छा काम करते हैं।

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

यह जानकर कि जावास्क्रिप्ट भाषा कैसे काम करती है या यह काम करने के अपने तरीके को कैसे लागू करती है, आप आसानी से उन स्थितियों की पहचान कर सकते हैं जहां आपकी पसंदीदा लाइब्रेरी से उपयोग के लिए तैयार फ़ंक्शन आपको अधिक फूला हुआ कोड आधार बनाने के लिए मजबूर कर सकता है और इसे हल करने पर ध्यान केंद्रित नहीं कर सकता है। संकट। हो सकता है कि यह आपका ध्यान कोड के किसी टुकड़े की नकल करने की ओर चुरा ले, जिसे आपने सैकड़ों बार लिखा है। और यहां तक ​​कि अपनी उत्पादकता बढ़ाने के लिए एआई के साथ, आप अपने कृत्रिम साथी द्वारा सुझाए गए समाधान का उपयोग करने के जाल में फंस सकते हैं, और वास्तव में भविष्य में चीजों को बनाए रखना कठिन हो जाएगा।

चिंता मत करो, हम कभी-कभी बेहतर नहीं जानते हैं। जैसा मैंने कहा, कोई भी हर समय सब कुछ नहीं जान सकता।

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

मैं दृढ़ता से वेब एपीआई के दस्तावेज़ों की जांच करने की अनुशंसा करता हूं। साथ ही ऑनलाइन ब्लॉग, सोशल मीडिया या वेब विकास में केंद्रित संसाधनों पर नज़र डालें।

अगर मैंने कोई ग़लती की है, जिसकी संभावना है, तो कृपया मुझे टिप्पणियों में बताएं। मैं आलोचना और नए विचारों को पूरी तरह से सुनता हूँ, इसलिए यदि आप चाहें तो कृपया उन्हें साझा करें!