DocumentFragment: यह क्या है और इसे कैसे (नहीं) लड़ना है

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

यह क्या है

एक DocumentFragment एक कंटेनर है जिसमें DOM तत्वों की एक मनमानी संख्या हो सकती है। यदि बहुत सरलता से, आप इसे एक बाल्टी के रूप में कल्पना कर सकते हैं। तत्वों को इसमें ढेर कर दिया जाता है ताकि सही समय पर उन्हें एक ही बार में फेंक दिया जा सके।

कैसे बनाएं?

Brainer।

var fragment = document.createDocumentFragment(); 

अन्य तरीके भी हैं, लेकिन उनके बारे में नीचे।

मुझे क्यों चाहिए?

जैसा कि मैंने ऊपर लिखा था, ताकि DOM तत्वों को स्टोर किया जा सके। "लेकिन उन्हें एक साधारण दिवा में संग्रहित किया जा सकता है," पाठक को आपत्ति हो सकती है। सच है, हालांकि, टुकड़े में एक अनूठी संपत्ति है जो इसे इस भूमिका के लिए सबसे अच्छा उम्मीदवार बनाती है। निम्नलिखित कोड पर विचार करें:

 var fragment = document.createDocumentFragment(); var parentDiv = document.createElement("div"); var div1 = document.createElement("div"); var div2 = document.createElement("div"); fragment.appendChild(div1); fragment.appendChild(div2); //   parentDiv.appendChild(fragment); console.log(parentDiv.children); 

कंसोल हमें क्या बताएगा? DocumentFragment से अपरिचित व्यक्ति यह सोच सकता है कि parentDiv में एक बच्चा होगा - fragment । लेकिन वास्तव में, इसके दो बच्चे होंगे - div1 और div1 । तथ्य यह है कि टुकड़ा ही एक डोम तत्व नहीं है, यह केवल डोम तत्वों के लिए एक कंटेनर है। और जब इसे insertBefore या insertBefore जैसी विधियों के तर्क के रूप में पास किया जाता है, तो यह DOM ट्री में एम्बेड नहीं होता है, बल्कि इसके कंटेंट को वहां एम्बेड करता है।

लेकिन आपको इसकी आवश्यकता क्यों है?

"बाल्टी" संपत्ति बेशक, अच्छी है, लेकिन व्यवहार में यह कैसे उपयोगी है? DocumentFragment में आवेदन के दो मुख्य क्षेत्र हैं।

1. HTML के उन टुकड़ों को संग्रहीत करना जिनके पास एक सामान्य पूर्वज नहीं है।

ऐसी परिस्थितियां हैं जब हमें किसी तत्व की सामग्री को बदलने की आवश्यकता होती है, लेकिन स्वयं तत्व को स्पर्श नहीं करते हैं। मान लीजिए कि हम ईवेंट प्रतिनिधिमंडल का उपयोग करते हैं, और आंतरिक तत्वों पर होने वाले सभी ईवेंट हैंडलर्स को बाहरी div पर लटका दिया जाता है। इस मामले में, DocumentFragment हमारे लिए आदर्श है:

 div.innerHTML = ""; div.appendChild(fragmentWithAllContent); 

"लेकिन क्या हम अभी उन्हें div में तत्व जोड़ सकते हैं क्योंकि हम उन्हें बनाते हैं?" - संक्षारक पाठक पूछेगा। हम कर सकते हैं, लेकिन यह इसके लायक नहीं है, और इसीलिए।

2. कई आवेषण के मामले में प्रदर्शन में सुधार।

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

जब हम DocumentFragment में एक तत्व जोड़ते हैं, तो यह reflow का कारण नहीं बनता है, क्योंकि टुकड़ा सक्रिय DOM ट्री का हिस्सा नहीं है (और मूल रूप से नहीं हो सकता है)। और सबसे महत्वपूर्ण बात: जब हम appendChild या अन्य समान तरीकों का उपयोग करके एक टुकड़े की सामग्री सम्मिलित करते हैं, तो इस बात की परवाह किए बिना कि कितने तत्व टुकड़े के अंदर हैं, रिफ्लो को केवल एक बार कहा जाता है ।

स्पष्टता के लिए, मैंने एक साधारण बेंचमार्क बनाया ताकि पाठक व्यक्तिगत रूप से अंतर देख सके।

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

बारीकियों

दो विशेषताएं हैं जो टुकड़े टुकड़े का उपयोग करने के लिए अक्सर नौसिखियों को मुश्किल बनाते हैं। पहला: जैसा कि मैंने ऊपर लिखा है, एक टुकड़ा एक DOM तत्व नहीं है । इसका मतलब यह है कि इसमें कई परिचित तरीकों और गुणों का अभाव है, विशेष रूप से - innerHTML । इसलिए, आप किसी खंड को सामग्री के अंश में नहीं बदल सकते। यह कैसे करना आसान नहीं है, नीचे वर्णित किया जाएगा।

दूसरी विशेषता: "खराब" का उपयोग करते समय टुकड़ा। अधिक सटीक रूप से, इसे खाली किया जाता है। जब हम div.appendChild(fragment) , तो टुकड़े के सभी बच्चों को एक div में div.appendChild(fragment) जाता है। और चूंकि एक तत्व में एक से अधिक माता-पिता नहीं हो सकते हैं, इसका मतलब है कि वे टुकड़े से हटा दिए गए हैं! अवांछनीय होने पर इस व्यवहार से बचने के लिए, आप cloneNode उपयोग कर सकते हैं।

<टेम्पलेट> टैग

एक जगह है जहाँ आप JSF के माध्यम से इसे बनाए बिना DocumentFragment के पार आ सकते हैं। यह टेम्पलेट तत्व की content गुण है।

<template> आविष्कार विशेष रूप से HTML- कोड के टुकड़ों को संग्रहीत करने के लिए किया <template> था, लेकिन समय से पहले ब्राउज़र को लोड करने के लिए नहीं। इस टैग के अंदर जो है वह सक्रिय DOM ट्री का हिस्सा नहीं बनता है। विशेष रूप से (नवागंतुक अक्सर इस पार भी आते हैं), उन्हें querySelector का उपयोग करके नहीं पाया जा सकता है। <template> टैग के अंदर HTML कोड से बनाए गए तत्व इसके बच्चे नहीं बनते हैं। इसके बजाय, जावास्क्रिप्ट उन्हें content संपत्ति के माध्यम से एक्सेस कर सकता है, जो है - एक आश्चर्य! - बस डॉक्यूमेंटफ्रेगमेंट।

टेम्पलेट तत्व का उपयोग करके, आप एक स्ट्रिंग से एक टुकड़ा बना सकते हैं:

 function createFragmentFromString(str){ var template = document.createElement("template"); template.innerHTML = str; return template.content; } 

उपसंहार

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