इंडेक्स डीडी के ऑब्जेक्टस्टोर ब्लॉक यूआई

Question

में बड़ी मात्रा में डालने से मैं अपने इंडेक्सड डीबी के ऑब्जेक्टस्टोर में कुछ ~ 35000 ऑब्जेक्ट्स को सहेजना चाहता हूं। मैं डालने के लिए नीचे कोड का उपयोग कर रहा हूँ।

AddListings = function (x2j_list_new, callback) { 
    var transaction = db.transaction(["listings"], IDBTransaction.READ_WRITE); 
    var count = 0; 
    transaction.oncomplete = function (event) { 
     if (callback) { 
      console.log('x2jShowListing Added ' + count + '/' + x2j_list_new.length); 
       callback([count, x2j_list_new.length]); 
      } 
    }; 
    transaction.onerror = function (e) { 
     console.log("myError: ", e); 
     if (callback) { 
      callback(false); 
     } 
    }; 
    var store = transaction.objectStore("listings"); 

    $.each(x2j_list_new, function (index0, item0) { 
     var request = store.put(item0); 
     request.onsuccess = function (event) { 
      count++; 
      // event.target.result 
      }; 
     }); 
    });   
}; 

उपरोक्त कोड ठीक काम करता है, लेकिन पाशन और ~ 35000 वस्तुओं से अधिक डालने यूआई ~ 200 सेकंड के लिए अनुत्तरदायी बना देता है। मैंने सोचा कि शायद मैं वेबवर्कर्स का उपयोग कर सकता हूं, लेकिन इंडेक्सड डीबी वेबवर्कर्स के अंदर उपलब्ध नहीं है। मैंने थोक डालने का रास्ता खोजने की कोशिश की, एक नहीं मिला। यूआई को अवरुद्ध किए बिना बड़ी मात्रा में वस्तुओं को सम्मिलित करने के बारे में कोई विचार?

Answer 1

से थोड़ा बेहतर प्रतिक्रिया देता है, आप सही रास्ते पर हैं, लेकिन आप ब्राउज़र को 35,000 ऑब्जेक्ट्स स्टोर करने के लिए कह रहे हैं इससे पहले कि उसे स्टोर करना समाप्त हो जाए। यहाँ कोड एक अनुरोध अगले शुरू करने (लेकिन एक ही लेन-देन का प्रयोग करके) से पहले खत्म करने के लिए के लिए जो एसिंक्रोनस रूप से इंतजार कर रहा है है: अब मैं [हिस्सा] में सरणी बंटवारे हूँ के लिए

openRequest = window.indexedDB.open("MyDatabase", 1); 
    openRequest.onerror = function(event) { 
     console.error(event); 
    }; 
    openRequest.onsuccess = function (event) { 
     var db = openRequest.result; 
     db.onerror = function(event) { 
      // Generic error handler for all errors targeted at this database's requests 
      console.error(event.target); 
      window.alert("Database error: " + event.target.wePutrrorMessage || event.target.error.name || event.target.error || event.target.errorCode); 
     }; 
     var transaction = db.transaction('item', "readwrite"); 
     var itemStore = transaction.objectStore("item"); 
     putNext(); 

     function putNext() { 
      if (i<items.length) { 
       itemStore.put(items[i]).onsuccess = putNext; 
       ++i; 
      } else { // complete 
       console.log('populate complete'); 
       callback(); 
      } 
     }   
    };  

Answer 2

आप कॉलबैक का उपयोग कर सही सब कुछ कर रहे हैं।

वेबवर्कर एपीआई अभी तक किसी भी बड़े ब्राउज़र द्वारा लागू नहीं किया गया है। दिलचस्प बात यह है कि यह तुल्यकालिक होने की उम्मीद है। आपके द्वारा वर्णित सटीक कारण के लिए नियमित API एसिंक है - यह UI थ्रेड को अवरुद्ध नहीं करना चाहिए।

कॉलबैक का उपयोग करना लॉक अप से बचने का तरीका है, लेकिन 35k ऑब्जेक्ट्स पर आप स्पष्ट रूप से इस प्रतिमान को तोड़ रहे हैं। दुर्भाग्यवश, आईडीबी प्रदर्शन अभी तक मैंने देखा है कि बेंचमार्क से WebSQL के बराबर नहीं है।

क्रोम के स्तर डीबी के साथ कुछ नए प्रयोगात्मक बैकएंड (एफएफ SQLite है) लेकिन मुझे लगता है कि आपका अनुभव साबित करता है कि सुधार के लिए कुछ जगह है।

Answer 3

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

Answer 4

मैं 500 के हिस्सों में सरणी को विभाजित कर रहा हूं और लूप के बजाय setTimeout का उपयोग कर रहा हूं। अब यूआई