Angular 由谷歌创建，是一个构建现代网络应用的极好工具。它帮助您创建快速、高效且易于使用的单页面应用（SPAs）。您甚至可以用它来构建在手机、平板或电脑上运行的应用！
2026 更新：现代 Angular 应用通常依赖于 API、微服务和动态客户端渲染。负载测试应反映真实用户行为，包括路由、API 调用和在并发流量下的交互操作。
Angular 为您提供了一个良好的起点，它的结构井然有序。这使得编写干净且易于维护的代码更容易。您可以轻松组合应用中的不同部分，就像构建积木一样，使设计和更新应用变得简单。
虽然 Angular 帮助团队构建现代应用，但仍需要优化性能以确保快速加载时间和平滑的用户交互。
- 编写高效代码：保持代码组织良好，使用 Angular 的最新功能以加快应用运行速度。
- 优化构建流程：确保应用快速构建和部署，最小化延迟。
- 监控您的应用：关注应用在实际环境中的表现，帮助您识别并解决可能导致速度变慢的问题。
遵循这些技巧，您可以创建高性能的 Angular 应用，提供出色的用户体验。
确定应用性能和加载时间时的问题
由于 Angular 是一个基于现代 TypeScript 的框架，提供动态网页，监控其性能和加载时间存在一定挑战。准确衡量页面上新内容渲染时机较为困难，因为单页面应用（SPA）在网页加载完成后不触发浏览器的新导航。因此，HTTP 监控工具（以及API 监控工具）无法提供显著指标来优化加载时间，因为 Angular 不会触发新的浏览器请求到服务器。
此外，尽管 HTTP 响应决定了网页发送请求的结果，但它们在理解嵌入的 JavaScript 文件及其相关资源被解析、执行并渲染直到用户能完全交互时的真实加载时间方面存在不足。需要采用不同的方法来测试和监控浏览器中的 JavaScript 事件，以便从客户端获得准确的加载时间。
优化加载时间的工具
Angular 提供了一系列工具和技术，帮助减少应用加载时间并随时间监控其性能，特别是在应用规模足够大以处理多重重计算时。帮助减少应用初始加载时间并加快页面导航的技术有提前编译（Ahead-of-Time，AoT）、代码拆分和模块预加载。我们将详细讨论这些技术。
提前编译
Angular 应用有两种主要的编译方式：即时编译（Just-in-Time，JiT），即在运行时在浏览器中编译应用；提前编译（Ahead-of-Time，AoT），如其名，其在构建时编译应用。AoT 编译器在构建过程中组装 HTML 和 TypeScript 代码，浏览器下载前完成编译。
它通过显著减少应用启动所需时间来加快渲染过程。这样，浏览器加载的是可执行代码，能够立即渲染应用，而无需等待应用编译。此外，预编译代码通过将资源（如 HTML 模板和外部 CSS）内嵌进应用程序，减少了向外部资源发起的异步请求。因此，编译后的代码减少了对这些文件的单独 AJAX 请求，使用户体验更顺畅、更快速。
代码拆分
简而言之，代码拆分将应用的 JavaScript 包分离，确保应用功能不受影响。它控制初始加载时的主要JavaScript 代码。代码拆分可在应用内不同层面完成，如入口点、动态加载模块以及通过SplitChunksPlugin共享代码，同时避免代码重复。
Angular 应用中主要有两种代码拆分方式：组件级代码拆分和路由级代码拆分。两者的主要区别在于组件级在无路由导航时也可懒加载单个组件，而路由级在导航时懒加载单个路由。无论哪种方式，都可通过应用的 TTI（可交互时间）来测试。TTI 是一个很好的性能指标，用于衡量应用响应所需时间，即用户能开始与应用交互前的加载时长。
模块预加载
模块预加载是 Angular 提供的一种技术，允许模块根据设定规则尽早加载。模块可以同时预加载、在特定事件发生时加载，或根据情况仅加载部分模块。开发者可以检查模块加载时间及采用预加载策略的价值。Angular 的模块预加载与懒加载类似，区别在于应用模块在所有急加载模块成功加载后立即加载。这样，当用户导航到懒加载模块时，可能的延迟被消除，同时应用初始加载速度也得以提升，因为其初始模块首先加载。
Angular 的默认预加载策略是PreloadAllModules和NoPreloading。前者表示预加载所有懒加载模块，后者禁用任何预加载。在使用 PreloadAllModules 时，若应用模块数量庞大，可能会面临瓶颈，此时考虑自定义预加载策略是有益的。
在企业场景中，自定义预加载策略更显意义。例如，优先预加载资源消耗高的模块而非资源消耗低的模块，这是开发者可采用的策略。此外，模块预加载的时间点在缩短加载时间中也扮演重要角色。
使用 LoadView 对 Angular 应用进行负载测试
LoadView 提出了一种创新且全面的解决方案，突破 HTTP 监控工具的局限，增强 Angular 开发者现有的客户端应用控制、监控和优化工具。LoadView 是基于云的负载测试平台，提供网站、web 应用和 API 的压力测试监控，通过实时模拟数千并发连接，帮助识别瓶颈并验证整体性能。
注册账户后，开发者可创建一个设备，存储待测试的网站或应用。选择“网站”选项时，Angular 开发者可测试应用登录或着陆页的初始加载时间，配置一个成千上万用户并发访问页面的场景。选择“网络应用”选项时，Angular 开发者可以编写脚本并测试应用特定用例的加载时间。
例如，填写表单、导航应用内路由、对服务器加载数据进行排序，通常用于测量应用的 TTI。LoadView 允许用户以三种不同方式自定义加载类型，并设置执行计划，规定在一定时间内建立的连接数。此外，LoadView 还支持配置虚拟用户的地域分布，连接至网站。
相较传统方法，LoadView 为工程师提供了一种高效且经济的负载测试自动化流程。无需昂贵投资和耗时过程，开发者和测试人员无需担心预算和基础设施搭建，可专注于执行测试。借助真实浏览器测试，结果和洞见直接关联用户路径，确保应用能承受高峰负载场景。
最后，LoadView 能展示完整且深入的模拟测试报告。报告图示了虚拟用户连接执行计划、每个用户的平均响应时间以及执行场景期间发生的每个会话错误数。这些图表和性能数据提供了机会深入查看模拟中特定时刻的信息，获得页面渲染的每个元素加载时间的重要洞见。对 Angular 应用极为有益，因为它让开发者能够针对可能延迟应用 TTI 的具体元素采取行动。因此，LoadView 填补了在客户端准确测试和监控 JavaScript 事件以测试加载时间的空白，成为前端开发人员的强力工具。
结论：Angular Web 应用性能
当今用户期望网络应用瞬间加载。因此，Angular 开发者需关注速度！提前编译（AoT）和代码拆分等技术能显著提升应用加载速度。但速度不仅仅关乎初始加载，还需确保在大量用户同时使用时应用保持快速响应。这正是 LoadView 的用武之地。LoadView 让您模拟真实流量，识别性能瓶颈，犹如对应用进行压力测试，帮助确保其能承载高负载。
应用上线后，您还需持续监控性能，确保应用始终运行顺畅。这正是 Dotcom-Monitor 的作用。它从真实用户使用的浏览器持续监控您的应用，若出现问题，您将立即收到警报，并获得详细报告帮助定位性能问题。最棒的是，如果您之前用 LoadView 测试应用，可以轻松使用相同的测试脚本结合 Dotcom-Monitor。这就像为应用性能准备了一记连环拳！
准备好开始了吗？
- 免费试用 LoadView：注册免费试用，获得最多 5 次免费的负载测试，观察您的 Angular 应用在压力下的表现。
- 体验 Dotcom-Monitor：尝试我们的 Web 应用监控解决方案，确保您的应用对所有用户保持快速可靠。