javascript - 在 IndexedDB 中，IDBObjectStore.put 和 IDBCursor.update 有什么区别？

Question

在 IndexedDB 中，有两种方法可以更新数据库中已有的对象。您可以调用 IDBCursor.update 或 IDBObjectStore.put。

两者都接受更新后的对象作为参数。

IDBCursor.update 要求您先打开游标，但您基本上也必须使用 IDBObjectStore.put 来执行此操作才能检索先前的值。

IDBObjectStore.put 如果找不到要更新的对象，将创建一个新对象，但由于它必须先检查更新，我不知道这是否真的会创建一个性能差异。

那么这些方法有什么区别呢？有什么我想念的吗？我试图制作一个测试用例来调查性能差异:

var db;

function runTest(N, cb) {
  console.log("N = " + N);

  // Add some fake data to object store
  var tx = db.transaction("store", "readwrite");
  tx.objectStore("store").clear();
  for (var i = 0; i < N; i++) {
    tx.objectStore("store").add({"id": i, "index":0,"guid":"21310c91-ff31-4cb9-ae68-16d48cbbd84a","isActive":false,"balance":"$1,840.25","picture":"http://placehold.it/32x32","age":33,"eyeColor":"brown","name":"Witt Fletcher","gender":"male","company":"QUILM","email":"wittfletcher@quilm.com","phone":"+1 (851) 485-2174","address":"729 Conover Street, Marenisco, Virginia, 7219","about":"Incididunt do deserunt ut quis. Exercitation et ut ad aliqua ut do sint Lorem. Aliquip sit aliquip nulla excepteur pariatur ut laborum ea dolor. Consectetur incididunt et et esse commodo id eu dolor in. Nostrud sit mollit occaecat ullamco commodo aute anim duis enim et aliqua. Aute duis nostrud do minim labore sunt mollit in voluptate aliquip sit. Aliqua aliquip non ipsum exercitation cillum irure in.\r\n","registered":"2014-07-02T03:42:57 +04:00","latitude":-65.942119,"longitude":-129.471674,"tags":["reprehenderit","nostrud","velit","exercitation","nulla","nulla","est"],"friends":[{"id":0,"name":"Kristine Francis"},{"id":1,"name":"Lizzie Ruiz"},{"id":2,"name":"Bobbie Underwood"}],"greeting":"Hello, Witt Fletcher! You have 7 unread messages.","favoriteFruit":"apple"});
  }
  tx.oncomplete = function () {
    // Update with cursor.update
    var tStart = (new Date()).getTime();
    tx = db.transaction("store", "readwrite");
    var store = tx.objectStore("store");
    for (var i = 0; i < N; i++) {
      store.openCursor(i).onsuccess = function (event) {
        var cursor = event.target.result;
        cursor.value.age = 34;
        cursor.update(cursor.value);
      };
    }
    tx.oncomplete = function () {
      var tEnd = (new Date()).getTime();
      console.log("cursor.update - " + (tEnd - tStart) + " milliseconds");

      // Update with put
      tStart = (new Date()).getTime();
      tx = db.transaction("store", "readwrite");
      store = tx.objectStore("store");
      for (var i = 0; i < N; i++) {
        store.openCursor(i).onsuccess = function (event) {
          var cursor = event.target.result;
          cursor.value.age = 34;
          store.put(cursor.value);
        };
      }
      tx.oncomplete = function () {
        tEnd = (new Date()).getTime();
        console.log("put - " + (tEnd - tStart) + " milliseconds");

        if (cb !== undefined) {
          cb();
        }
      };
    };
  };
}

request = indexedDB.open("yes5ytrye", 1);
request.onerror = function (event) { console.log(event); };

request.onupgradeneeded = function (event) {
  var db = event.target.result;
  db.onerror = function (event) { console.log(event); };

  db.createObjectStore("store", {keyPath: "id"});
};

request.onsuccess = function (event) {
  db = request.result;
  db.onerror = function (event) { console.log(event); };

  runTest(100, function () {
    runTest(1000, function () {
      runTest(10000, function () {
        console.log("Done");
      });
    });
  });
};

可以试试here .

在 Firefox 中，我得到如下输出:

N = 100
cursor.update - 39 milliseconds
put - 40 milliseconds
N = 1000
cursor.update - 229 milliseconds
put - 256 milliseconds
N = 10000
cursor.update - 2194 milliseconds
put - 2096 milliseconds
Done

性能上基本没有区别。当 N 较大时，Chrome 中的结果略有不同:

N = 100
cursor.update - 51 milliseconds
put - 44 milliseconds
N = 1000
cursor.update - 414 milliseconds
put - 447 milliseconds
N = 10000
cursor.update - 13506 milliseconds
put - 22783 milliseconds
Done

但正如我上面所说，我什至不确定这两种方法之间是否应该有区别，因为看起来它们必须做完全相同的事情。

Answer 1

update cursor 和put 的主要区别在于，您需要使用cursor 检索要更新的元素；另一方面，当使用 put 语句时，您只需要知道要更新的元素的 id 并执行 put在 store 级别定义的函数。然而，这种加速只适用于您将完整对象存储在内存中的情况。

我稍微更新了您的代码并加快了速度:

var db;

function runTest(N, cb) {
  console.log("N = " + N);

  // Add some fake data to object store
  var tx = db.transaction("store", "readwrite");
  tx.objectStore("store").clear();
  for (var i = 0; i < N; i++) {
    tx.objectStore("store").add({"id": i, "index":0,"guid":"21310c91-ff31-4cb9-ae68-16d48cbbd84a","isActive":false,"balance":"$1,840.25","picture":"http://placehold.it/32x32","age":33,"eyeColor":"brown","name":"Witt Fletcher","gender":"male","company":"QUILM","email":"wittfletcher@quilm.com","phone":"+1 (851) 485-2174","address":"729 Conover Street, Marenisco, Virginia, 7219","about":"Incididunt do deserunt ut quis. Exercitation et ut ad aliqua ut do sint Lorem. Aliquip sit aliquip nulla excepteur pariatur ut laborum ea dolor. Consectetur incididunt et et esse commodo id eu dolor in. Nostrud sit mollit occaecat ullamco commodo aute anim duis enim et aliqua. Aute duis nostrud do minim labore sunt mollit in voluptate aliquip sit. Aliqua aliquip non ipsum exercitation cillum irure in.\r\n","registered":"2014-07-02T03:42:57 +04:00","latitude":-65.942119,"longitude":-129.471674,"tags":["reprehenderit","nostrud","velit","exercitation","nulla","nulla","est"],"friends":[{"id":0,"name":"Kristine Francis"},{"id":1,"name":"Lizzie Ruiz"},{"id":2,"name":"Bobbie Underwood"}],"greeting":"Hello, Witt Fletcher! You have 7 unread messages.","favoriteFruit":"apple"});
  }
  tx.oncomplete = function () {
    // Update with cursor.update
    var tStart = (new Date()).getTime();
    tx = db.transaction("store", "readwrite");
    var store = tx.objectStore("store");
    for (var i = 0; i < N; i++) {
      store.openCursor(i).onsuccess = function (event) {
        var cursor = event.target.result;
        cursor.value.age = 34;
        cursor.update(cursor.value);
      };
    }
    tx.oncomplete = function () {
      var tEnd = (new Date()).getTime();
      console.log("cursor.update - " + (tEnd - tStart) + " milliseconds");

      // Update with put
      tStart = (new Date()).getTime();
      tx = db.transaction("store", "readwrite");
      store = tx.objectStore("store");
      for (var i = 0; i < N; i++) {
          //you don't need the element just update
        store.put({"id": i, "index":0,"guid":"21310c91-ff31-4cb9-ae68-16d48cbbd84a","isActive":false,"balance":"$1,840.25","picture":"http://placehold.it/32x32","age":33,"eyeColor":"brown","name":"Witt Fletcher","gender":"male","company":"QUILM","email":"wittfletcher@quilm.com","phone":"+1 (851) 485-2174","address":"729 Conover Street, Marenisco, Virginia, 7219","about":"Incididunt do deserunt ut quis. Exercitation et ut ad aliqua ut do sint Lorem. Aliquip sit aliquip nulla excepteur pariatur ut laborum ea dolor. Consectetur incididunt et et esse commodo id eu dolor in. Nostrud sit mollit occaecat ullamco commodo aute anim duis enim et aliqua. Aute duis nostrud do minim labore sunt mollit in voluptate aliquip sit. Aliqua aliquip non ipsum exercitation cillum irure in.\r\n","registered":"2014-07-02T03:42:57 +04:00","latitude":-65.942119,"longitude":-129.471674,"tags":["reprehenderit","nostrud","velit","exercitation","nulla","nulla","est"],"friends":[{"id":0,"name":"Kristine Francis"},{"id":1,"name":"Lizzie Ruiz"},{"id":2,"name":"Bobbie Underwood"}],"greeting":"Hello, Witt Fletcher! You have 7 unread messages.","favoriteFruit":"apple"});
      }
      tx.oncomplete = function () {
        tEnd = (new Date()).getTime();
        console.log("put - " + (tEnd - tStart) + " milliseconds");

        if (cb !== undefined) {
          cb();
        }
      };
    };
  };
}

request = indexedDB.open("yes5ytrye", 1);
request.onerror = function (event) { console.log(event); };

request.onupgradeneeded = function (event) {
  var db = event.target.result;
  db.onerror = function (event) { console.log(event); };

  db.createObjectStore("store", {keyPath: "id"});
};

request.onsuccess = function (event) {
  db = request.result;
  db.onerror = function (event) { console.log(event); };

  runTest(100, function () {
    runTest(1000, function () {
      runTest(10000, function () {
        console.log("Done");
      });
    });
  });
};

这是我的结果:

N = 100
cursor.update - 46 milliseconds
put - 28 milliseconds
N = 1000
cursor.update - 157 milliseconds
put - 114 milliseconds
N = 10000
cursor.update - 5530 milliseconds
put - 2391 milliseconds
Done