AngularJS SPA 应用切换路由时如何防止页面卡顿？-JavaScript中文网-JavaScript教程资源分享门户

单页面应用（SPA）因为其极强的用户交互体验和快速响应速度而备受开发者追捧。AngularJS 作为众多前端框架之一，是构建 SPA 应用的绝佳选择。然而，随着路由数量增长和应用复杂度提升，用户经常会碰到页面卡顿、反应迟缓等问题，影响使用体验。

本文旨在介绍如何优化 AngularJS SPA 应用在切换路由过程中避免页面卡顿的具体方法，并提供实现代码示例以供参考。

什么是 SPA？

SPA（Single Page Application），即单页面应用程序，是一种使用 Ajax 和 HTML5 技术实现的 Web 应用程序。作为一种模式，SPA 能以更流畅响应用户操作并提供更高的性能。

SPA 应用是通过 JavaScript 动态更新当前页面内容而无需刷新整个页面来提供交互性的 Web 应用程序。SPA 应用通常具有自己的路由系统和视图层次结构。

AngularJS 中的路由

在 AngularJS 中，路由机制可在一个单一的页面中切换视图，从而实现 SPA 的核心功能。因此，AngularJS 的路由机制是优化 SPA 的一种非常有效的方式。

在 AngularJS 应用中，路由机制被称为 $route，是 AngularJS 应用的核心部分。它是与 URL 交互的前端 MVC 模式的核心，可以将 URL 中的片段映射到视图及预加载后端数据、Web 服务等。

防止页面卡顿的具体方法

按需优化预加载

在优化路由切换的性能时，一种常见的方法是进行路由切换的预加载。该方法可以让用户在观察某个内容时就能预加载下一个路由。

预加载非常适合于微调和快速响应。预加载对于前期或初步数据请求来说非常有帮助，可以提前准备下一段目标数据。

在 AngularJS 中，实现预加载时应避免过度预加载。在加载大量数据或复杂数据时，也应注意避免频繁进行网络调用。

缓存数据

当路由不再需要时，应考虑从缓存中清除数据。知道哪些数据不再需要并将其清除是优化应用的重要方面。

对于对后端数据进行本地缓存设计可以减少网络请求的延迟时间。在 AngularJS 中，使用 $cacheFactory 可以创建新的缓存实例并将其注入到 Controller 中。通过这种方法，可以提高应用的响应速度。

优化页面性能

页面性能优化不是仅限于缩短加载时间。它涉及到构建应用、包含减少和减轻 HTTP 请求数和 JavaScript 代码大小的外部资源负载。除此之外，还有广告嵌入和其他可阻塞元素的哈希。

为什么页面要保持轻量级呢？以下是它被认为是正确的一些原因：

加速开发速度
使页面更快
在低网络状况下保持性能
改善搜索引擎的可见性

优化页面性能主要是通过以下手段实现的：

异步加载JavaScript
压缩/混淆JavaScript
合并CSS文件
图片懒加载
延迟加载非关键资源

监听路由事件

最常见的方式是监听 $routeChangeStart 和 $routeChangeSuccess 事件。

$routeChangeStart 事件：在路由切换开始之前触发。 $routeChangeSuccess 事件：在路由切换完成之后触发。

这些事件可以在 rootScope 上面监听。以下是如何监听这些事件：

$rootScope.$on('$routeChangeStart', function () {
  // trigger when the route has started to change
});

$rootScope.$on('$routeChangeSuccess', function () {
  // trigger when the route has successfully changed
});

同时，在路由开始切换前，您还可以设置 $route.loadingRouteData 为 true，已告诉用户应用正在加载。

在应用加载完成之后，将 $route.loadingRouteData 设置为 false 可告知用户加载已完成：

$rootScope.$on('$routeChangeStart', function () { 
  $route.loadingRouteData = true; 
});

$rootScope.$on('$routeChangeSuccess', function () { 
  $route.loadingRouteData = false; 
});

在这里，我们可以定义自己的 Loading 动画来指示用户正在进行加载。

使用 AngularJS 运行机制

确定您使用的代码是直截了当的和优化过的。AngularJS 的运行机制会在依赖注入之前执行代码，并且根据实际需要实例化服务。这样，它可以在实例化之前执行代码，并且只进行实例化，从而减少额外的资源开销。

示例代码

下面是如何在 AngularJS 应用中实现路由切换时防止页面卡顿的示例代码：

预加载

下面是如何在 AngularJS 中进行预加载的代码：

var module = angular.module('myApp', []);

// syntax for pre-loading the next route
$routeProvider.when('/dashboard', {
  resolve: {
    // resolve data happens here
  }
});

缓存使用

// Create a custom `$cacheFactory`.
var cacheFactory = $cacheFactory('myCache');

// Use the `$cacheFactory` to store data.
cacheFactory.put('myKey', 'myData');

// Get the stored data.
var myData = cacheFactory.get('myKey');

监听路由事件

$rootScope.$on('$routeChangeStart', function () {
  $route.loadingRouteData = true;
});

$rootScope.$on('$routeChangeSuccess', function () {
  $route.loadingRouteData = false;
});

使用 AngularJS 运行机制

-- -------------------- ---- -------
----------------------- ---
  -------------------- -
    ------------------------
    ------------------- - -- - --- ---------
  ---

----------------------- ---
  --------------------------- --------------- -
    ------------------------
    ------------------- - -- - --------------
  ---

结论

本文针对 AngularJS 应用在切换路由时避免页面卡顿的具体方法进行了深入介绍，并提供了代码示例。

在编写 AngularJS SPA 应用时，我们应该始终优化路由切换的性能，以确保用户体验始终如一。通过按需优化预加载、缓存数据、优化页面性能、监听路由事件以及使用 AngularJS 运行机制等方法，我们可以减少页面卡顿和用户等待的时间，从而实现更快更流畅的用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67063355d91dce0dc859cfb8