ios - IndexedDB 插入时速度慢

Question

我在第三代 iPad 上安装了 iOS 8，并在 Safari 中试用了 IndexedDB。我的示例代码只是将 1000 个对象添加到对象存储。

它可以工作，但是与具有类似或较弱硬件的其他设备相比它非常慢。

有关实现细节，请参阅此代码段(IndexedDB 似乎在 stackoverflow 上被禁用，因此该示例无法开箱即用 - 改用 this fiddle):

将代码片段添加到 jsbin，因为 jsfiddle 在 iOS 设备上引发了 SecurityException 并更新了 Deni Spasovskis 的回答 http://jsbin.com/jorohe/1/ .问题仍然存在。

原始代码:

var openRequest = window.indexedDB.open("testdb");

openRequest.onsuccess = function (event) {
	document.getElementById("output").innerHTML += "open success<br/>";
	
	var db = event.target.result;
	var trans = db.transaction(["testStore"], (typeof IDBTransaction.READ_ONLY !== "undefined") ? IDBTransaction.READ_WRITE : "readwrite" );
	var store = trans.objectStore("testStore");
	
	var reqClear = store.clear();
	reqClear.onsuccess = function () {
	
		var objectsToAdd = 1000;
		var addedObjects = 0;
		
		var startTime = window.performance.now();
		
		for (var i=0; i<objectsToAdd; i++) {
			(function (pos) {
			var req = store.add({testID: pos, a: "foo", b: "bar"});
			req.onsuccess = function () {
				addedObjects++;
				if (addedObjects >= objectsToAdd) {
					document.getElementById("output").innerHTML += "done adding<br />";
					document.getElementById("output").innerHTML += "Took: "+(window.performance.now() - startTime)+"ms<br />";
				}
			}
			req.onerror = function () {
				document.getElementById("output").innerHTML += "error adding element:" + req.error + " <br/>";
			}
			})(i);
		}
	}
	reqClear.onerror = function () {
		document.getElementById("output").innerHTML += "error clearing store: "+reqClear.error+"<br/>";
	}
};

openRequest.onupgradeneeded = function (event) {
	var db = event.target.result;
	var objectStore = db.createObjectStore("testStore", { keyPath: "testID" });
	
	document.getElementById("output").innerHTML += "created store<br/>";
};

openRequest.onerror = openRequest.onabort = function () {	
	document.getElementById("output").innerHTML += "error opening db<br/>";
}

<div id="output">

</div>

iPad 用了大约 6 秒，而 HTC Windows Phone 8s(较弱的硬件)上的 Internet Explorer 只用了 1.5 秒，三星 Galaxy S III(可能与 iPad 相当)上的 Chrome 在 300 秒内完成插入毫秒。

虽然我知道这项技术在 iOS 上是新技术，但我并没有预料到会出现如此严重的性能下降。

代码是否有任何问题，或者是否有任何其他方法可以在 iOS 设备上使用 IndexedDB 实现良好的性能？

Answer 1

为了在批量插入时获得最佳性能，您不应在每个添加语句上监听事件，而应附加到事务 oncomplete 和 onerror 事件。

我稍微更改了您的代码，并在我的手机 (nexus 4) 上将性能提高了 15%(从 ~340 毫秒减少了 ~290 毫秒)。但与 PC 相比，这仍然很慢。

代码片段不起作用，所以这里是 jsFiddle 的链接:http://jsfiddle.net/a5p6mL6m/2/

var openRequest = window.indexedDB.open("testdb");

openRequest.onsuccess = function (event) {
	document.getElementById("output").innerHTML += "open success<br/>";
	
	var db = event.target.result;
	var trans = db.transaction(["testStore"], (typeof IDBTransaction.READ_ONLY !== "undefined") ? IDBTransaction.READ_WRITE : "readwrite" );
	var store = trans.objectStore("testStore");
    	var startTime;
	trans.oncomplete = function () {
					document.getElementById("output").innerHTML += "finished adding<br />";
					document.getElementById("output").innerHTML += "End time: "+(window.performance.now() - startTime)+"<br />";
				
			}
	var reqClear = store.clear();
	reqClear.onsuccess = function () {
	    startTime = window.performance.now();
		var objectsToAdd = 1000;
		var addedObjects = 0;
		
		for (var i=0; i<objectsToAdd; i++) {
			store.add({testID: i, a: "foo", b: "bar"});
			
		}
	}
	reqClear.onerror = function () {
		document.getElementById("output").innerHTML += "error clearing store: "+reqClear.error+"<br/>";
	}
};

openRequest.onupgradeneeded = function (event) {
	var db = event.target.result;
	var objectStore = db.createObjectStore("testStore", { keyPath: "testID" });
	
	document.getElementById("output").innerHTML += "created store<br/>";
};

openRequest.onerror = openRequest.onabort = function () {	
	document.getElementById("output").innerHTML += "error opening db<br/>";
}

<div id="output">
</div>