javascript - 插入循环后，indexedDB 阻止了 DOM 异常

Question

我正在使用indexedDB进行一些测试，并且在插入测试期间我总是被chrome阻止。基本上我正在做的是一个简单的循环，100000 次，在数据库中插入简单的字符串。它正确完成，但最后检查器中的 indexedDB 不可见。甚至不刷新页面。如果尝试重新加载页面并重新打开数据库，我会收到 DOM 异常。如果关闭 chrome，它就会挂起，我必须杀死它。

代码下方:

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');
}