我有一个使用Firestore进行数据的Angular Web应用程序 . 在Chrome,Firefox和Safari中,一切都按预期工作 . 我在Microsoft Edge上打开了应用程序,它需要30秒才能获取4个项目的集合 .
一旦页面加载并点击某个项目进入“详细信息”视图,加载时间也同样长 . 集合中的每个项目只有图像, Headers ,日期和引用字符串 . 详细信息页面具有相同的数据和另外4个元数据,所有这些都是字符串 .
我有点迷失为什么数据提取需要这么长时间 . 据我所知,我有一个相当直接的查询 .
以下是按顺序排列的主要查询 . (对于最后一个在“运行代码”容器中的道歉...格式化很棘手,否则:))
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
即使是没有日期格式化和下载图像的此查询的基本版本也会导致令人难以置信的长页面加载 .
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
任何帮助或指向这里尝试的东西将非常感激 . 在其他浏览器表现非常好的时候,它有点像砖墙 .
UPDATE
在IE中查看控制台时,我发现我的供应商脚本上存在访问被拒绝的情况 . 60分钟后我的页面加载 . 这可能与它有关吗?
UPDATE 26.03.18
对于那些偶然发现这个问题的人来说,firebase人员似乎已经意识到这一点,并且可以在这里跟踪它:https://github.com/firebase/firebase-js-sdk/issues/461