जावास्क्रिप्ट के साथ क्लाइंट-साइड आइटम फ़िल्टर करने के लिए सर्वोत्तम अभ्यास, डोम से छुपाएं या निकालें?

Question

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

1. प्रत्येक पंक्ति के वर्ग को छिपाने या दिखाने के लिए (दृश्यता का उपयोग करके: इसे छिपाने के लिए ध्वस्त) सेट करना, और तालिका में DOM तत्व को रखना।
2. प्रत्येक डेटा आइटम के लिए एक डोम तत्व रखते हुए, उसे छिपाने और दिखाने के लिए तालिका को अलग/संलग्न करना।
3. बस इसे दिखाने के लिए मांग पर एक डीओएम ऑब्जेक्ट बनाने, प्रत्येक डेटा आइटम के लिए एक सार वस्तु रखें।

कौन सा सबसे अच्छा उपयोगकर्ता अनुभव देने के लिए की संभावना है? मैंने जो कुछ भी सूचीबद्ध किया है उसके अलावा कोई अन्य अनुशंसित विधि?

Answer 1

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

उदाहरण HTML *:

<ul id="massive-dataset-list-display"> 
    <li> 
     <div class="field-1"></div> 
     <div class="field-2"></div> 
     <div class="field-n"></div> 
    </li> 
    <li> 
     <div class="field-1"></div> 
     <div class="field-2"></div> 
     <div class="field-n"></div> 
    </li> 
    <li> 
     <div class="field-1"></div> 
     <div class="field-2"></div> 
     <div class="field-n"></div> 
    </li> 
    . 
    . 
    . 
</ul> 

उदाहरण जावास्क्रिप्ट *:

var MassiveDataset = function(src) { 
    var data   = this.fetchDataFromSource(src); 
    var templateNodes = $("#massive-dataset-list-display li"); 

    // It seems that you already have this handled, but just for 
    // completeness' sake 
    this.filterBy(someParam) { 
     var filteredData = []; 
     // magic filtering of `data` 
     this.displayResults(filteredData); 
    }; 

    this.displayResults(filteredData) { 
     var resultCount = filteredData.length; 

     templateNodes.each(function(index, node) { 
      // There are more results than display node templates, start hiding 
      if (index >= resultCount) { 
       $(node).hide(); 
       return; 
      } 

      $(node).show(); 
      this.formatDisplayResultNode(node, filteredData[i]); 
     }); 
    }; 

    this.formatDisplayResultNode = function(node, rowData) { 
     // For great justice 
    }; 
}; 

var md = new MassiveDataset("some/data/source"); 
md.filterBy("i can haz filter?"); 

* जांची नहीं। कॉपी/पेस्ट को काम करने की उम्मीद न करें, लेकिन यह अच्छा होगा।

Answer 2

मुझे लगता है कि यह वास्तव में आप जो चाह रहे हैं नहीं है, लेकिन जब से तुम विकल्पों के लिए दरवाजा खोला ...

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

मूल रूप से, अगर आप कौन-सा डेटा आप दिखाना चाहते हैं समय से आगे निर्णय लेते हैं, तुम पर उठा की परेशानी के माध्यम से जाना क्या वहाँ नहीं है।

मैं समझता हूँ कि यह आपकी आवश्यकताओं को नहीं हो सकता है, लेकिन मैं एक सुझाव मामले में आप क्लाइंट-साइड के विचार पर अटक गया के रूप में यह पेशकश करते हैं।

Answer 3

डोम मैनिपुलेशन "कुछ हजार वस्तुओं" के लिए बहुत धीमा है। मान लीजिए कि आपके पास वास्तव में एक अच्छा कारण है कि आप फ़िल्टरिंग करने के लिए सर्वर क्यों नहीं प्राप्त कर रहे हैं तो मुझे मिला सबसे अच्छा समाधान क्लाइंट-साइड एक्सएसएल एक्सएमएल के रूप में आयोजित डेटा पर ट्रांसफॉर्म का उपयोग करना है।

बदल खुद को भी यथोचित बड़े डेटा सेट पर बहुत जल्दी कर रहे हैं। इसके बाद आप अंततः एक युक्त डीआईवी की आंतरिक HTML संपत्ति को परिणाम असाइन करेंगे जहां आप तालिका दिखाना चाहते हैं। डीओएम में बड़े बदलावों के लिए आंतरिक HTML का उपयोग करना जावास्क्रिप्ट के साथ डीओएम में हेरफेर करने से तेज है।

संपादित: जस्टिन जॉनसन की टिप्पणी के जवाब: -

तो डाटासेट कि बड़ी है, एक्सएमएल संभावित क्रूरतापूर्ण बड़े होने जा रहा है।

नोट मैं पहले से ही सर्वर की सहायता के संबंध में अपने पहले पैराग्राफ में अस्वीकरण कर रहा हूं। डिजाइन को चारों ओर स्विच करने और AJAX के समझदार उपयोग करने के लिए यहां एक मामला हो सकता है, या बस एक बार में अधिक डेटा दिखाने का प्रयास नहीं कर सकता है। हालांकि मैं इस सवाल का जवाब देने के लिए अपनी पूरी कोशिश कर रहा हूं।

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

इसके अलावा, यदि एक्सएमएल को डीओएम ऑब्जेक्ट में परिवर्तित किया गया है, तो यह कैसे बेहतर होगा?

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

हालांकि जब आंतरिक HTML को एक बड़ी HTML स्ट्रिंग असाइन की जाती है, तो ब्राउज़र बिना किसी पुनर्मूल्यांकन किए बिना डोम ऑब्जेक्ट्स का पूरा समूह बना सकता है, यह पूरे डीओएम के निर्माण के बाद तक विभिन्न संपत्ति मूल्यों के लिए एक अरब अपडेट को रोक सकता है। इसलिए बड़े पैमाने पर परिवर्तन के लिए आंतरिक HTML पानी से सीधे डीओएम हेरफेर को उड़ा देगा।

Answer 4

कक्षा को जोड़ने और तत्व को दिखाने/छिपाने के लिए सीएसएस का उपयोग करना शायद सबसे तेज़ (कोडिंग और प्रदर्शन के अनुसार) होगा, खासकर इतनी सारी वस्तुओं के साथ।

यदि आप डोम मैनिपुलेशन मार्ग जाना चाहते हैं, तो डीओएम ऑफ-लाइन संपादित करने पर विचार करें। स्मृति में डोम पेड़ कैश करें (एक स्थानीय चर), सभी पंक्तियों को अद्यतन करें और मूल डोम नोड को प्रतिस्थापित करें। इस मामले पर अधिक जानकारी के लिए http://www.peachpit.com/articles/article.aspx?p=31567&seqNum=5 देखें।

---

मैं एक परियोजना है कि एक गूगल मैप्स 'व्यूपोर्ट' और एक न्यूनतम-अधिकतम मूल्य स्लाइडर के भीतर स्थान पर छानने आइटम आवश्यक किया है (उन है कि उत्सुक हैं के लिए, यह एक अचल संपत्ति वेबसाइट के लिए) था।

पहला संस्करण सभी (सर्वर-साइड) फ़िल्टर किए गए आइटम प्राप्त करने के लिए AJAX अनुरोध का उपयोग करता था, इसलिए फ़िल्टर में प्रत्येक परिवर्तन ने नए डेटा का अनुरोध किया। फिर JSON डेटा को डोम नोड्स पर पार्स किया गया था और दस्तावेज़ में जोड़ा गया था। इसके अलावा, इस मामले में वस्तुओं की खोज इंजन अनुक्रमण संभव नहीं था।

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