polymerfire: firebase-query is very slow when loading an array with more than just a few items

Description

I am loading a firebase array with around 12000 items, using a Polymer element like:

<link rel="import" href="/bower_components/polymer/polymer.html">

<link rel="import" href="/bower_components/polymerfire/firebase-query.html">

<dom-module id="loader">
  <template>
    <firebase-query id="query"
                    path="/data"
                    data="{{data}}">
    </firebase-query>
  </template>

  <script>
    (function () {
      'use strict';

      Polymer ({
        is: 'loader',

        properties: {
          data: {
            type: Object,
            value: [],
            notify: true
          }
        },

        ready: function () {
          var self = this;

          setTimeout (function () {
            console.log ('Data load took ' + (self.$.query.__loadEnd - self.$.query.__loadStart) + 'ms');
          }, 60000);
        }
      });
    }) ();
  </script>
</dom-module>

The setTimeout () callback is for my instrumentation, which in the current version of firebase-query looks like:

--- firebase-query.html.orig	2017-04-28 12:13:59.221771214 +0100
+++ firebase-query.html.instr	2017-04-28 14:31:49.199146378 +0100
@@ -308,6 +308,10 @@
         },
 
         __onFirebaseChildAdded: function(snapshot, previousChildKey) {
+          if (!this.__loadStart) {
+            this.__loadStart = performance.now ();
+          }
+
           var key = snapshot.key;
           var value = snapshot.val();
           var previousChildIndex = this.__indexFromKey(previousChildKey);
@@ -318,6 +322,7 @@
 
           this.__map[key] = value;
           this.splice('data', previousChildIndex + 1, 0, value);
+          this.__loadEnd = performance.now ();
         },
 
         __onFirebaseChildRemoved: function(snapshot) {

Expected outcome

My app should load the data quickly, without interrupting the user experience too severely.

Actual outcome

My instrumentation timings for several loads are (times in ms):

37324.61 37408.37 36633.60 37129.21 38887.08

Yes, that is nearly 40 seconds to load just 12000 items! Worse, the browser is completely frozen while this is happening.

Steps to reproduce

1. Have a decent-sized array in Firebase
2. Load it as above
3. Try to interact with page elements while the load happens

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

I’ve tested with Chrome, but I doubt this is browser specific.