삽입 루프 후 indexedDB가 DOM 예외를 차단했습니다.

Question

indexedDB로 몇 가지 테스트를하고 있으며 삽입 테스트 중에 크롬을 계속 차단합니다. 기본적으로 내가하고있는 일은 단순한 루프, 100000 번, DB에 간단한 문자열을 삽입하는 것입니다. 그것은 올바르게 끝나지 만 인스펙터의 indexedDB는 보이지 않습니다. 페이지를 새로 고칠 필요조차 없습니다. 페이지를 다시로드하고 데이터베이스를 다시 열려고하면 DOM 예외가 발생합니다. 크롬을 닫으면 멈추고 죽여야합니다. 코드 아래

:

var testIndexedDB = { 

    db : null, 

    request: null, 

    openDB : function(){ 
    var self = this; 
    var request = this.request = indexedDB.open("web", 1); 

    request.onupgradeneeded = function() { 
     // The database did not previously exist, so create object stores and indexes. 
     request.close(); 
     var db = request.result; 
     var stories = db.createObjectStore("stories", {keyPath: "id"}); 

    }; 

    request.onsuccess = function() { 
     self.db = request.result; 
    }; 

    request.onerror = function(e) { 
     console.log(e);  
    }; 

    request.onblocked = function(e){ 
     console.log('blocked') 
    } 
    }, 

    addItem: function(store, loid, text){ 
    var db = this.db; 
    var trans = db.transaction(store, "readwrite"); 
    var store = trans.objectStore(store); 
    var request = store.put({ 
     "id": loid, 
     "text" : text 
    }); 

    request.onsuccess = function(e) { 
     // Re-render all the todo's 

    }; 

    request.onerror = function(e) { 
     console.log(e.value); 
    }; 
    }, 

    getItem: function(store, loid){ 
    var db = this.db; 
    var trans = db.transaction(store); 
    var store = trans.objectStore(store); 
    var request = store.get(loid); 

    request.onsuccess = function(e) { 
     console.log(request.result) // Refresh the screen 
    }; 

    request.onerror = function(e) { 
     console.log(e); 
    }; 
    }, 

    removeItem: function(store, loid){ 
    var db = this.db; 
    var trans = db.transaction(store, "readwrite"); 
    var store = trans.objectStore(store); 
    var request = store.delete(loid); 

    request.onsuccess = function(e) { 
     console.log('el deleted'); // Refresh the screen 
    }; 

    request.onerror = function(e) { 
     console.log(e); 
    }; 
    }, 

    testSize: function(){ 
    var i = 0, 
     t; 

    while(i<100000){ 
     t = new Date().getTime(); 
     this.addItem('stories', i, t) 
     i++; 

    } 
    console.log('items added') 
    } 
}; 

testIndexedDB.openDB(); 

는 단순히 문제를 통지 testIndexedDB.testSize()를 실행합니다.

연속 삽입을 올바르게 테스트하려면 어떻게해야하며 왜 이런 현상이 발생합니까?

감사

Answer 1

당신이 일괄 삽입에있는 가장 큰 문제는 100000 트랜잭션을 열고있는 사실과 차단 데이터베이스. 배치 삽입을 위해 코드에 대한 최적화를 수행했으며 삽입 시간이 5 초 미만입니다.

모든 항목에 대해 별도의 트랜잭션을 여는 대신 항목을 1000 개 배열로 그룹화 한 다음 해당 일괄 처리에 대한 트랜잭션을 엽니 다. 모든 변화는 이제 트랜잭션의 수는 여기에서 100로 감소 있습니다

addItems: function(store, items){ 
    var db = this.db; 
    var trans = db.transaction(store, "readwrite"); //uses only one transaction per batch of 1000 
    trans.oncomplete = function(e){ 
     console.log('batch inserted'); 
    }; 
    var store = trans.objectStore(store); 
    for(var i=0; i<items.length; i++){ 
     var request = store.put(items[i]); 
     request.onerror = function(e) { 
      console.log(e.value); 
     }; 
    } 
}, 

그리고 내가 일괄 적으로 데이터를 전송하기 위해 삽입 기능을 변경했습니다 : 우선 내가 일괄 삽입 기능을 만들어

:

testSize: function(){ 
    var i = 0, 
    t; 
    tempList = []; 
    while(i<100000){ 
     t = new Date().getTime(); 
     tempList.push({ 
      "id": i, 
      "text" : t 
     }) 
     if(i> 0 && i% 1000 == 0){ //items are grouped into a array of 1000 items 
      this.addItems('stories', tempList.slice()); 
      tempList = []; 
     }  
     i++; 
    } 
    console.log('items added'); 
}