Angularfire firestore queries incredibly slow in Internet Explorer and Microsoft Edge

问题

I have an Angular web app that uses Firestore for data. In Chrome, Firefox and Safari everything is working as expected. I've opened the app on Microsoft Edge and it's taking up to 30 seconds to fetch a collection of 4 items.

Once the page loads and I click on an item to go into a 'detail' view, the load time is also just as long. Each item in a collection only has an image, title, date and reference string. The detail page has the same data and another 4 pieces of metadata, all of which are strings.

I'm a bit lost as to why the fetching of data is taking so long. As far as I can tell, I have a reasonably straight forward query.

Below are my main queries in sequential order. (apologies for the last one being in a 'run code' container...formatting was tricky otherwise :) )

ngOnInit

ngOnInit() {

  this.loading = true;

  this.activatedRoute.params.subscribe((urlParameters) => {
    this.folderId = urlParameters['folderId'];
    this.subscribeToUser();
  });
}

Subscribe to user

subscribeToUser() {
  this._subscription = this.authService.user.subscribe(user => {
    if (user) {
      this.userID = user.uid;
      this.getProjectListData();
    }
  });
}

Get Project List Data

Even a basic version of this query without date formatting and downloading images is causing an incredibly long page load.

  getProjectListData() {

    // Check to see if the folder ID in the URL exists. If it does, proceed to display matching projects. If not, route back to folders.
    this.afs.firestore.doc(`/users/${this.userID}/folders/${this.folderId}`).get().then(docSnapshot => {
      if (docSnapshot.exists) {

        this.projectCollection = this.afs.collection<any>(`users/${this.userID}/projects`, ref => {
          return ref.where('project_folder', "==", this.folderId).orderBy("project_date", "desc");
        });

        // Get the data
        this.projects = this.projectCollection.snapshotChanges().map(actions => {

          // Remove Loading Animation
          this.loading = false;

          return actions.map(a => {

            const data = a.payload.doc.data();

            // If the array returned isn't empty, set the local noResults variable to false. The 'New Project' dialogue won't be displayed
            if (typeof data !== 'undefined') {
              this.noResults = false;
            }

            // Get the document ID
            const id = a.payload.doc.id;

            // Get the date from each project
            var projectDateTimestamp = data.project_date;

            // Get the users date format preference
            const usersDateFormat = this.settingsService.usersetting_dateformat;

            if (this.settingsService.usersetting_dateformat == "DD/MM/YYYY") {
              data.formattedDate = moment(projectDateTimestamp).format("DD MMM YYYY");
              this.usersDateFormatForResults = "dd MMM yyyy";
            } else {
              data.formattedDate = moment(projectDateTimestamp).format("MMM DD YYYY");
              this.usersDateFormatForResults = "MMM dd yyyy";
            }

            // Firebase Reference
            var storage = firebase.storage();

            // If a project thumbnail exists, proceed
            if (data.project_photo_thumbnail != undefined) {

              // Get the Image URL 
              var image = data.project_photo_thumbnail;

              // Create an image reference to the storage location
              var imagePathReference = storage.ref().child(image);

              // Get the download URL and set the local variable to the result (url)
              var newImageURL = Observable.from(imagePathReference.getDownloadURL());

            }

            return { id, newImageURL, ...data };

          });

        });
      } else {

        this.router.navigate(['folders']);

      }
    });

  }

My latest request to show a document took 65 seconds.

Network Tab from IE Network Tab from IE

Any assistance or pointers of things to try here would be hugely appreciated. At a bit of a brick wall as the other browsers are performing wonderfully.

UPDATE

When looking through the console in IE, i see that there's an access denied on my vendor scripts. After 60 odd seconds my page loads. Could this be anything to do with it?

UPDATE 26.03.18

For anyone who stumbles on this issue, the firebase guys appear to be aware of it and it can be tracked here: https://github.com/firebase/firebase-js-sdk/issues/461

Denied Scripts in the IE console

来源：https://stackoverflow.com/questions/49299742/angularfire-firestore-queries-incredibly-slow-in-internet-explorer-and-microsoft