AngularJS 1.5.6单页应用页面频繁切换后变慢问题咨询

Great question—this is a super common gotcha with AngularJS 1.5.x and UI Router, especially when dealing with repeated route transitions. Let’s break down exactly why this happens, and why it only impacts route switching instead of all your app’s interactions.

Why Only Route Switching Gets Slow #

Here’s the key: every time you switch routes with UI Router, it instantiates a new instance of your target controller (DashboardController or MainController). If the old controller’s resources aren’t properly cleaned up, those instances hang around in memory. Here’s how that hits route switching specifically:

• Accumulated $watchers & Event Listeners: Each controller instance brings its own set of $watch expressions, $on event listeners, and DOM bindings. When old instances aren’t garbage-collected, all these extra watchers and listeners still run during Angular’s $digest cycle—especially during route transitions, when Angular is processing the new view and syncing all bindings.
• Current Interactions Stay Fast: Your other click handlers and interactions are tied to the active, currently-rendered controller instance. They don’t trigger the code or watchers attached to those lingering old instances, so they feel snappy even as the memory pileup grows.

Common Leak Points to Check #

Let’s go through the most likely culprits in your setup:

1. Uncleaned Global Event Listeners #

If your controllers subscribe to global events (like on $rootScope) but don’t unsubscribe when the controller is destroyed, you’re adding a new listener every time you switch routes. For example:

// ❌ Bad: Listener stays forever
$rootScope.$on('userUpdated', function() {
  // Handle event
});

// ✅ Good: Unsubscribe on destroy
var userUpdateListener = $rootScope.$on('userUpdated', function() {
  // Handle event
});

$scope.$on('$destroy', function() {
  userUpdateListener(); // Call the returned function to remove the listener
});

This applies to any custom events, third-party library events, or even $interval/$timeout—always cancel them in the $destroy hook.

2. Lingering $watchers #

While Angular usually cleans up $watch expressions when a controller’s $scope is destroyed, this fails if something (like a service or a DOM element) holds a reference to the $scope. If you manually created watchers (e.g., var unwatch = $scope.$watch(...)), make sure to call unwatch() in the $destroy hook too.

3. Accidental UI Router State Caching #

Double-check your UI Router state configs—if you set cache: true (or forgot to set cache: false), UI Router will keep old controller instances and view templates in memory. This is great for performance if you’re reusing the same state often, but it causes pileup when switching back and forth between two states repeatedly.

4. Service References Holding onto Controllers/Scopes #

Services in AngularJS are singletons. If a service stores a reference to your controller instance or its $scope (e.g., pushing it into an array for later use), that reference will prevent garbage collection. Make sure to remove any controller/scope references from services when the controller is destroyed.

How to Diagnose & Fix #

1. Use Chrome DevTools to Find Leaks:
   • Open the Memory panel, take a heap snapshot, switch routes 5+ times, then take another snapshot.
   • Search for your controller names (DashboardController, MainController)—if the number of instances matches the number of route switches, you’ve confirmed a leak.
   • Use the Retainers tab to see what’s holding onto the old instances (e.g., a $rootScope event listener, a service array).
2. Audit Controller Cleanup:
   • Go through both controllers and ensure every external subscription, interval, watcher, or DOM binding is cleaned up in the $destroy hook.
3. Verify UI Router Config:
   • Explicitly set cache: false on your states if you don’t need caching:

     $stateProvider
       .state('dashboard', {
         url: '/dashboard',
         controller: 'DashboardController',
         templateUrl: 'dashboard.html',
         cache: false // Ensure old instances are discarded
       })
       .state('main', {
         url: '/main',
         controller: 'MainController',
         templateUrl: 'main.html',
         cache: false
       });
     

Wrap-Up #

The root issue is almost always that old controller instances aren’t being garbage-collected because of leftover references or uncleaned resources. Route switching slows down because each transition adds more work to Angular’s $digest cycle, while your current interactions only use the active instance and don’t touch those lingering resources.

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