Extremely slow calling table.getAll() in IE (11)

[damiangreen]

The same code in IE seems to take as huge amount of time when calling getAll() as compared to Chrome. In Chrome this code runs in <1s, in IE, it takes about minute to reach the console line. Is there something I can do to speed this up?

var loadWhiteListNodeIds = function () {
            $indexedDB.openStore('whiteListNodeIds',
              function (table) {
                  return table.find(7672990).then(function (item) {
                      table.getAll().then(function (whitelistNodeIds) {
                          console.log('setting whiteListNodeIds');
                          $scope.whitelistNodeIds = whitelistNodeIds;
                      });
                  })["catch"](function (error) {
                      return getAllWhiteListNodesAndAddToDb('whiteListNodeIds');
                  });
              });
            };

[schmod]

Why are you doing a getAll() inside of a find()?

Additionally, there's a small chance that ["catch"] is invoking some sort of weird behavior in IE's JS parser. Try replacing it with:

$indexedDB.openStore('whiteListNodeIds', function(item) { ... })
    .then(null, function(err) { ... });

Finally: What type of data are you storing in the DB? Do your values contain blobs, or some other sort of large object that might not be optimized in IE?

[schmod]

One other thought:

You're performing two queries inside of the same transaction. It's possible that there's a bug in angular-indexedDB that's preventing a digest from being triggered immediately after the first query completes. (I've seen similar odd behavior in my own code; mostly when writing unit tests. It's been noted (#19) that this library handles promises in a fairly unconventional (and potentially problematic) manner.

Try:

var loadWhiteListNodeIds = function () {
            $indexedDB.openStore('whiteListNodeIds',
              function (table) {
                  return table.find(7672990).then(function (item) {
                      $rootScope.$applyAsync(function(){
                          table.getAll().then(function (whitelistNodeIds) {
                              console.log('setting whiteListNodeIds');
                              $scope.whitelistNodeIds = whitelistNodeIds;
                          });
                      });
                  })["catch"](function (error) {
                      return getAllWhiteListNodesAndAddToDb('whiteListNodeIds');
                  });
              });
            };

Note that I've wrapped the getAll() call inside $rootScope.$applyAsync()

[damiangreen]

it has 200,000 rows containing just a few string columns, lat, long , id. I'll try your suggestion.

I've been debugging this library and because IE doesn't havethis.store.getall' its's dropping down in to the

this._mapCursor(defer, function (cursor)  

code.

[schmod]

Ah, #19 is definitely of interest to you.

Every iteration calls defer.notify(), which in turn calls $rootScope.apply(). This is going to be ridiculously inefficient for large data sets.

Try commenting out the call to defer.notify().

[damiangreen]

Thanks for your swift feedback@schmod (in the ObjectStore.prototype._mapCursor function) With defer.notify commented out: loading 200k records took 26,478 seconds. With it: loading 200k records took 85,583 seconds. A dramatic improvement, But loading from the server looks like a faster fallback option for IE :(

Also, Your original suggestion of wrapping in $sscope.applyAsync results in a DOMException with message TransactionInactiveError.

[schmod]

Are you comfortable enough with the native IndexedDB API to write a variant of your code that doesn't use this library and lives entirely outside of Angular? I'm curious if IE's IndexedDB performance is really that bad.

[damiangreen]

@schmod. I'll attempt that, I'm just going to first run a comparison with this less popular lib https://github.com/gauravgango/gaurav-angular-indexeddb. .I shall feedback with result.

Update, so that lib (gaurav) takes 46.262 seconds in chrome to load the same dataset and errors with "TypeError: Object doesn't support this action" in IE. So it fared even worse.

Update. So I attempted to use the raw calls instead of any libs . The timings are Chrome: 36.113s, IE 35.469s. Code:

var loadWhiteListNodeIds = function () {
            var objectStore = db.transaction(storeName, IDBTransaction.READ_ONLY).objectStore(storeName);
            $scope.results = [];
            $scope.start = new Date().getTime();
            objectStore.openCursor().onsuccess = function (event) {
                var cursor = event.target.result;

                if (cursor) {
                   $scope.results.push(cursor.value);
                    cursor.continue();
                }

                else {
                    var d = new Date().getTime() - $scope.start;
                    $scope.whitelistNodeIds = $scope.results;
                    console.log('time ' + d);
                }
            };

So at the moment it seems the best approach is to either use this raw call as a fallback for IE, or this lib with the defer commented out....

I'm not sure I like either approach :)

[bramski]

Is there a bug here? Can I close this issue? Should something be done?

[damiangreen]

I recommend the removal of defer.notify() to improve the performance of this in IE.