Question

我有一个使用Firestore进行数据的Angular Web应用程序。在Chrome，Firefox和Safari中，一切都按预期工作。我已经在Microsoft Edge上打开了应用程序，它需要30秒才能获取4个项目的集合。

页面加载后我单击某个项目进入“详细信息”视图，加载时间也一样长。集合中的每个项目只有图像，标题，日期和引用字符串。详细信息页面具有相同的数据和另外4个元数据，所有这些都是字符串。

我有点迷失为什么数据提取需要这么长时间。据我所知，我有一个相当直接的查询。

以下是按顺序排列的主要查询。（对于最后一个在'运行代码'容器中的道歉...格式化很棘手，否则:)）

ngOnInit

ngOnInit() {

  this.loading = true;

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

订阅用户

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

获取项目列表数据

即使是没有日期格式化和下载图像的此查询的基本版本也会导致令人难以置信的长页面加载。

  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']);

      }
    });

  }

我最近显示文档的请求花了65秒。

Network Tab from IE Network Tab from IE

任何有关此处尝试的帮助或指示都将非常感激。在其他浏览器表现非常好的时候，它有点像砖墙。

更新

在IE中查看控制台时，我发现我的供应商脚本上存在访问被拒绝的情况。 60分钟后我的页面加载。这可能与它有关吗？

更新26.03.18

对于任何偶然发现此问题的人来说，firebase人员似乎已经意识到这一点并且可以在此处跟踪：https://github.com/firebase/firebase-js-sdk/issues/461

Denied Scripts in the IE console

Angularfire firestore在Internet Explorer和Microsoft Edge中查询速度极慢

0 个答案: