jQuery बड़े रूपों को मान्य करता है - स्क्रिप्ट धीरे-धीरे चल रहा है

Question

मैं jQuery 1.5 के साथ jQuery मान्य प्लगइन 1.8.0 का उपयोग कर रहा हूं। छोटे से मध्यम आकार के रूपों के लिए बहुत अच्छा काम करता है। बड़े रूपों के लिए प्रदर्शन महत्वपूर्ण रूप से घटता है (आईई 8 और एफएफ 4 में भी), कभी-कभी "स्क्रिप्ट बहुत धीरे-धीरे चल रहा है" संदेश उत्पन्न करता है। ऐसा प्रतीत होता है कि प्लगइन पूरे डोम को फॉर्म के भीतर स्कैन करता है जो गुणों और कक्षाओं को सत्यापित करने के लिए देखता है, भले ही आपने कस्टम नियम निर्दिष्ट किए हों। किसी को भी यह पूरी तरह से बंद करने के बारे में पता है? एक अनदेखा विकल्प भी है, लेकिन यह अभी भी डीओएम को स्कैन करेगा, जो अनदेखा attr के साथ उन्हें छोड़ देगा।

यहां एएसपी.NET प्रस्तुत करता है, सिवाय इसके कि डेटा की लगभग 120 पंक्तियां हैं। दुर्भाग्यवश, परिणाम पेजिंग एक विकल्प नहीं है।

<table id="GridView1"> 
    <tbody> 
     <tr> 
      <th scope="col">Header 1</th> 
      <th scope="col">Header 2</th> 
      <th scope="col">Header 3</th> 
      <th scope="col">Header 4</th> 
      <th scope="col">Header 5</th> 
      <th scope="col">Header 6</th> 
      <th style="width: 60px; white-space: nowrap" scope="col">Header 7</th> 
      <th style="width: 60px; white-space: nowrap" scope="col">Header 8</th> 
     </tr>   
     <tr class="gridRow" jquery1507811088779756411="3"> 
      <td style="width: 50px" align="middle"> 
       <span id="GridView1_ctl03_Label1">XXX</span> 
      </td> 
      <td> 
       <span id="GridView1_ctl03_Label2">YYY</span> 
      </td> 
      <td style="width: 50px" align="middle"> 
       <span id="GridView1_ctl03_Label3">ZZZ</span> 
      </td> 
      <td align="middle"> 
       <select style="width: 70px" id="GridView1_ctl03_Dropdown4" name="GridView1$ctl03$Dropdown4"> 
        <option selected value="Y">Y</option> 
        <option value="N">N</option> 
       </select> 
      </td> 
      <td style="width: 50px" align="middle"> 
       <input id="GridView1_ctl03_hidId1" value="100" type="hidden" name="GridView1$ctl03$hidId1" /> 
       <input id="GridView1_ctl03_hidId2" value="100" type="hidden" name="GridView1$ctl03$hidId2" /> 
       <input id="GridView1_ctl03_hidId3" value="100" type="hidden" name="GridView1$ctl03$hidId3" /> 
       <input id="GridView1_ctl03_hidId4" value="100" type="hidden" name="GridView1$ctl03$hidId4" /> 
       <select style="width: 40px" id="GridView1_ctl03_Dropdown5" name="GridView1$ctl03$Dropdown5"> 
        <option selected value="A">A</option> 
        <option value="B">B</option> 
       </select> 
      </td> 
      <td style="width: 50px" align="middle"> 
       <span id="GridView1_ctl03_Label6">101</span> 
      </td> 
      <td align="middle"> 
       <input style="width: 60px" id="GridView1_ctl03_Textbox8" class="date required" 
        title="Please enter a valid start date." type="text" name="GridView1$ctl03$Textbox8" 
        jquery1507811088779756411="122" /> 
      </td> 
      <td align="middle"> 
       <input style="width: 60px" id="GridView1_ctl03_Textbox9" class="date" 
        title="Please enter a valid end date." type="text" name="GridView1$ctl03$Textbox9" 
        jquery1507811088779756411="123" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

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

Answer 2

मैं इस मुद्दे के साथ भी संघर्ष कर रहा हूं। कुछ सत्यापन को अनुकूलित करके, मैं आईई 8 में 80 सत्यापन तत्वों के लिए 4100MS से 192ms तक अपने सत्यापन समय को कम करने में सक्षम हूं। मैं यहां अपने निष्कर्षों को उम्मीद में पोस्ट करूंगा कि दूसरों को लाभ हो सकता है, और आशा है कि jquery-validate में कुछ विशेषज्ञ को मेरे कोड में कोई समस्या मिलेगी।

1. सुनिश्चित करें कि आप मान्यता कुछ भी आप वास्तव में मान्य करने के लिए की जरूरत नहीं है पर जिम्मेदार बताते हैं न करना पड़े:

   यहाँ कुछ चीजें हैं जो मैं उपयोगी पाया है। मैंने कुछ रहस्यमय रूप से तत्वों पर दिखाया था - मुझे यकीन नहीं है कि क्यों, लेकिन मैं इसे रोकने के लिए अपने .cshtml में डेटा-वैल = झूठी हार्ड-कोडित हूं।

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

   jQuery.validator.prototype.subset = function (container, validateHiddenElements) { 
       var ok = true; 
       var validator = this; 
   
       // Performance hack - cache the value of errors(), and temporarily patch the function to return the cache 
       // (it is restored at the end of this function). 
       var errors = this.errors(); 
       var errorsFunc = this.errors; 
       this.errors = function() { return errors; }; 
   
       $(container.selector + " [data-val=true]").each(function() { 
   
        !this.name && validator.settings.debug && window.console && console.error("%o has no name assigned", this); 
   
        var tagName = this.tagName.toLowerCase(); 
        if (tagName == "input" || tagName == "select" || tagName == "textarea") { 
         var $this = $(this); 
   
         if (!$this.hasClass('doNotValidate') && 
          (validateHiddenElements || $this.is(':visible'))) { 
   
          if (!validator.element($this)) ok = false; 
   
         } 
        } 
       }); 
   
       this.errors = errorsFunc; 
   
       return ok; 
   }; 
   

3. validator.settings पर अपना स्वयं का शो त्रुटि विधि परिभाषित करें। अंतर्निहित एक प्रदर्शित करने में कोई त्रुटि नहीं होने पर भी प्रत्येक मान्य करने योग्य इनपुट के लिए त्रुटि संदेश फैलता है। यदि आपके पास इनमें से बहुत कुछ है तो यह काफी धीमा हो जाता है, इसलिए आप इससे बचने के लिए कुछ तर्क जोड़ सकते हैं। जो जवाब के लिए इसी तरह, मैंने पाया कि सफलता defaultShowErrors से सेटिंग को अक्षम() फ़ंक्शन बाहर काफ़ी मदद करता है -

   function showErrorsOverride() { 
       var anyElementsNeedUpdate = false; 
       for (var i = 0; i < this.errorList.length; i++) { 
        if (!$(this.errorList[i].element).hasClass(this.settings.errorClass)) { 
        anyElementsNeedUpdate = true; 
        } 
       } 
       for (var i = 0; i < this.successList.length; i++) { 
        if ($(this.successList[i]).hasClass(this.settings.errorClass)) { 
         anyElementsNeedUpdate = true; 
        } 
       } 
   
   
       if (anyElementsNeedUpdate) 
       { 
        // show the usual errors (defaultShowErrors is part of the jQuery validator) 
        this.defaultShowErrors(); 
       } 
   } 
   

Answer 3

पार्टी के लिए देर से थोड़ा है, लेकिन दिलचस्पी लेने वाले किसी के लिए: यहाँ मेरा है। ऐसा लगता है कि वैध फ़ील्ड के लिए त्रुटि लेबल छिपा है, और यदि आपके पास कोई त्रुटि लेबल नहीं है तो यह अनावश्यक ओवरहेड है। IE8 में ~ 1.8 सेकंड से ~ 260ms तक 55 फ़ील्ड के साथ अपना फॉर्म बढ़ाया।

$(document).ready(function() 
{ 
    $("form").each(function() 
    { 
     $(this).data("validator").settings.success = false; 
    }) 
}); 

Answer 4

हमारे पास बड़े रूप में समान समस्याएं थीं लेकिन निम्नलिखित समाधान मिला। अब हमारे बड़े रूप (> 600 इनपुट) ~ 10ms में मान्य हैं।

मैं इस सवाल का जवाब यहाँ पोस्ट किया है: https://stackoverflow.com/a/23132844/1821717