Edge浏览器中Firestore运行异常：卡顿或无法使用的解决方案咨询

First off, let’s tackle this step by step—legacy Microsoft Edge (pre-Chromium) has well-documented quirks with older Angular versions and Firebase SDKs, so we can narrow down the likely culprits. Here are the most effective fixes to try:

1. Ensure Critical Polyfills Are Enabled #

Angular 5 relies on ES6+ features that legacy Edge doesn’t support natively. Missing polyfills can lead to slow execution or runtime errors.

Open your src/polyfills.ts file and make sure these lines are uncommented or added:

// Required for ES6+ functionality in Edge
import 'core-js/es6/array';
import 'core-js/es6/string';
import 'core-js/es6/object';
import 'core-js/es6/promise';
import 'core-js/es6/map';
import 'core-js/es6/set';

// If your app uses animations, add this too
import 'web-animations-js';

After adding these, rebuild your app and test again—this alone often fixes major performance hits in Edge.

2. Optimize Firebase/AngularFire2 Data Fetching #

Poorly managed Firebase listeners are a common cause of slowdowns, especially in less performant browsers:

• Use the async pipe everywhere: It automatically unsubscribes from observables when components are destroyed, preventing memory leaks that accumulate over time. Avoid manually subscribing unless absolutely necessary.
• Limit real-time listeners: If you don’t need live updates for a dataset, use take(1) to fetch a single snapshot instead of keeping a listener open:

  // Instead of this (keeps listener active):
  this.db.collection('items').valueChanges().subscribe(data => ...);
  
  // Do this for static data:
  this.db.collection('items').valueChanges().pipe(take(1)).subscribe(data => ...);
  

• Paginate large datasets: Fetching hundreds/thousands of documents at once will choke Edge. Use Firebase’s limit() and startAfter() methods to load data in chunks.

3. Enable Production Mode for Testing #

Angular’s development mode adds extra change detection checks and debugging tools that can cripple performance in older browsers. Even if you’re testing a dev build, temporarily enable production mode to see if that’s the bottleneck:

In src/main.ts:

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}
// Or force it on for testing:
enableProdMode();

Rebuild and test—if performance improves drastically, you know the dev mode overhead was the issue (and you’ll be fine once you deploy the production build).

4. Profile Edge's Performance DevTools #

Use Edge’s built-in DevTools to pinpoint exactly what’s slowing things down:

1. Press F12 to open DevTools, go to the Performance tab.
2. Click "Record" and interact with your app for 10-20 seconds.
3. Stop recording and look for:
   • Long tasks (blocks over 50ms) that are hogging the main thread.
   • Excessive reflows/repaints caused by frequent DOM changes.
   • Unusually large JavaScript execution times from Firebase or Angular code.

This will help you zero in on specific components or functions causing the slowdown.

5. Update Dependencies (If Feasible) #

Your versions are quite outdated: Angular 5, Firebase 4.11.0, and AngularFire2 5.0.0-rc.6. Later releases of these libraries include bug fixes for Edge compatibility and performance.

If you have time to test (since your app is nearing launch), consider upgrading to the latest compatible versions:

• AngularFire2 5.x has stable releases beyond rc.6 that fix Edge-specific issues.
• Firebase 4.x has later patches—check the release notes for performance improvements.

Just be sure to run thorough tests after upgrading, as breaking changes might exist.

6. Check for Memory Leaks #

Slowdowns that get worse over time are almost always memory leaks. Use Edge’s Memory tab to take heap snapshots:

1. Take a snapshot when the app first loads.
2. Interact with it for a few minutes, then take another snapshot.
3. Compare the two—look for growing numbers of component instances, Firebase listeners, or DOM elements that aren’t being cleaned up.

Common fixes: Ensure all event listeners are removed on component destroy, and use the async pipe instead of manual subscriptions.

内容的提问来源于stack exchange，提问作者Frank P