Angular 性能优化实战指南加载性能、运行时性能与性能度量体系【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angularAngular 内置了大量性能优化但应用规模扩大后仍需针对加载有多快与交互有多顺滑两个维度做精细调优。本文基于 Angular 官方仓库中的性能最佳实践总览performance/overview.md展开系统梳理加载性能懒加载路由、defer、injectAsync、图片优化、SSR与运行时性能Zoneless 变更检测、慢计算、跳过子树、Zone 污染两大方向的优化技术并结合仓库源码与指南文档给出度量手段和先优化什么的决策路径。读完本文你可以按场景选取对应优化手段并掌握如何用 Chrome DevTools 与 Angular DevTools 定位性能瓶颈。一、性能优化的两个维度Angular 将应用性能拆分为两个正交的关注点加载性能Loading performance决定应用多快变得可见和可交互。加载缓慢会直接影响 Core Web Vitals 中的 Largest Contentful PaintLCP和 Time to First ByteTTFB。运行时性能Runtime performance决定应用加载完成后的响应流畅度。Angular 的变更检测系统负责保持 DOM 与数据同步优化变更检测何时运行、在哪些视图上运行是提升运行时性能的主要抓手。1.1 加载性能技术总览官方总览文档给出的加载性能技术矩阵如下此处已将原文档中的局部相对链接转换为仓库根路径技术作用适用场景懒加载路由将路由组件的加载推迟到导航发生时减小初始包体积多路由应用且并非所有路由在首次加载时都需要defer 延迟加载将组件拆分为按需加载的独立 bundle首次渲染不可见的组件、重型第三方库、首屏之下below-the-fold的内容injectAsync 懒加载服务将很少用到的服务拆分为独立 chunk按需加载依赖大型库的服务、低频使用的功能图片优化优先加载 LCP 图片、懒加载其余图片、生成响应式srcset属性任何展示图片的应用服务端渲染SSR在服务器端渲染页面实现更快的首次绘制与更好的 SEO配合 hydration 恢复交互性、增量 hydration 将分区的水合推迟到需要时内容密集的应用、需要搜索引擎收录的页面1.2 运行时性能技术总览技术作用适用场景Zoneless 变更检测移除 ZoneJS 开销仅当信号signals或事件表明状态变化时才触发变更检测新应用Angular v21 的默认行为或准备迁移的存量应用慢计算优化识别并优化昂贵的模板表达式与生命周期钩子性能剖析发现特定组件导致变更检测周期缓慢时跳过组件子树使用OnPush变更检测跳过未变化的组件树需要更精细控制变更检测的应用Zone 污染防止第三方库或定时器引起的不必要变更检测基于 Zone 的应用中剖析发现过多变更检测周期时二、加载性能让首屏更快2.1 懒加载路由与 defer多路由应用如果将所有路由组件打进初始 bundle用户会为根本不会访问的页面买单。路由级懒加载将路由组件的加载推迟到导航发生时直接缩小初始包体积参见 路由指南。组件级的defer模板指令则提供更细粒度的拆分被defer包裹的组件会被编译为独立 bundle在满足触发条件如进入视口、应用空闲时才下载并渲染适用于首屏不可见的组件、重型第三方库和首屏之下的内容详见 defer 指南。从源码结构看defer作为模板语法由编译器packages/compiler-cli/在构建阶段解析并生成对应的动态导入代码因此其分包行为依赖于构建器的配合属于编译器指令 打包的协同优化。2.2 用 injectAsync 懒加载服务当某个服务依赖大型库或仅低频使用时injectAsync可以让服务的代码被打包器拆分为独立 JavaScript chunk只在首次请求实例时下载。这与路由/组件懒加载不同——服务级懒加载针对的是依赖注入图中的重依赖。仓库文档给出了一个典型场景ReportExporter依赖重型表格库大多数用户只看报告、少数人点击导出。按需加载方式如下摘自 lazy-loading-services.mdimport {Component, injectAsync} from angular/core; Component({ selector: app-report, template: button (click)export()Export/button, }) export class Report { private exporter injectAsync(() import(./report-exporter).then((m) m.ReportExporter)); async export() { const exporter await this.exporter(); exporter.export(); } }关键机制前置条件被懒加载的服务必须是自动提供的auto-provided需标注Injectable({providedIn: root})或Service()装饰器。没有自动提供Angular 在 chunk 加载后无法构造服务。单例语义首次调用this.exporter()触发动态导入并通过常规 DI 系统解析服务后续调用复用同一个 promisechunk 只下载一次。默认导出简化若懒加载服务是默认导出可直接传动态导入Angular 会自动解包defaultinjectAsync(() import(./report-exporter))。预取prefetch默认在调用返回的函数时才下载 chunk传入返回 Promise 的触发器可以提前开始下载。框架内置onIdle触发器等待浏览器空闲后启动加载也可以用{timeout: 1_000}之类的配置为其设置最大等待时间保证预取发生在已知时间窗口内。自定义预取触发器PrefetchTrigger本质上是一个返回 Promise 的函数可将其与业务信号对齐如鼠标悬停import {PrefetchTrigger} from angular/core; export function onHover(target: HTMLElement): PrefetchTrigger { return () new Promisevoid((resolve) { target.addEventListener(pointerenter, () resolve(), {once: true}); }); }需要注意的是预取是机会性的opportunistic如果用户在预取触发前就调用功能Angular 会立即加载依赖并在就绪后尽快 resolve 你的await。2.3 图片优化任何展示图片的应用都应使用 Angular 提供的图片优化能力angular/common中的NgOptimizedImage组件。它做三件事优先加载 LCP最大内容绘制图片、懒加载其余图片、生成响应式srcset属性避免浏览器下载超出视口的图片尺寸。实现位于packages/common/包内完整用法与 LCP 图片标注方式参见 图片优化指南交互式演练可参考 学习 Angular 教程中的优化图片步骤。2.4 服务端渲染SSR与 Hydration对内容密集、需要搜索引擎收录的应用SSR 在服务器端渲染页面实现更快的首次绘制和更好的 SEO。页面送达浏览器后需要通过 hydration水合 恢复交互性进一步地增量 hydration 可以把某些分区的水合推迟到真正需要交互时执行避免一次性水合整个页面。整体方案参见 SSR 指南。值得注意的联动关系是Zoneless 应用做 SSR 时框架过去依赖 ZoneJS 判断应用何时稳定、可以序列化移除 ZoneJS 后必须通过PendingTasks服务告知框架哪些异步任务需要阻止序列化详见下文 3.1 节。三、运行时性能让交互更顺滑3.1 Zoneless 变更检测Zoneless 指南给出了移除 ZoneJS 的四个理由性能更好ZoneJS 以 DOM 事件和异步任务作为应用状态可能更新了的信号来触发变更检测它对状态是否真正变化毫无感知因此同步频率远超必要。Core Web Vitals 更好ZoneJS 带来可观的包体积与启动时间开销。调试体验更好带 ZoneJS 的堆栈更难读代码在 Angular Zone 之外运行导致的行为异常也难以排查。生态兼容性更好ZoneJS 靠 monkey-patch 浏览器 API 工作但并非每个新 API 都有补丁如async/await无法有效 patch必须降级处理移除 ZoneJS 消除了这一持续的复杂度来源。启用方式Zoneless 自 Angular v21 起成为默认行为无需任何配置启用只需确认代码中没有provideZoneChangeDetection覆盖默认配置。Angular v20 则在启动时显式添加// standalone bootstrap bootstrapApplication(MyApp, {providers: [provideZonelessChangeDetection()]}); // NgModule bootstrap platformBrowser().bootstrapModule(AppModule); NgModule({ providers: [provideZonelessChangeDetection()], }) export class AppModule {}彻底移除 ZoneJSZoneless 应用应从构建中完全移除 ZoneJS 以缩减 bundle。通常是在angular.json的build与test两个 target 的polyfills中移除zone.js与zone.js/testing使用显式polyfills.ts的工程则移除其中对应的import zone.js;语句。之后直接npm uninstall zone.js。Zoneless 依赖的通知机制Angular 依靠核心 API 的通知来决定何时、在哪些视图上运行变更检测。这些通知包括ChangeDetectorRef.markForCheckAsyncPipe会自动调用ComponentRef.setInput模板读取的 signal 被更新绑定的 host 或模板事件监听器回调挂载被上述任一机制标记为脏dirty的视图。据此指南推荐应用组件采用OnPush策略作为走向 Zoneless 兼容的推荐步骤但不是硬性要求而库组件若作为用户组件的宿主例如通过ViewContainerRef.createComponent创建组件而非内容投影且宿主内可能使用Default/Eager策略的子组件则不能改为OnPush。同时必须移除对NgZone.onMicrotaskEmpty、NgZone.onUnstable、NgZone.isStable、NgZone.onStable的依赖——Zoneless 模式下这些 observable 永不发射isStable恒为true。需要等待一轮变更检测完成时应改用afterNextRender等单轮或afterEveryRender可能跨多轮或直接使用MutationObserver等 DOM API。文档同时明确NgZone.run与NgZone.runOutsideAngular与 Zoneless 兼容无需移除反而移除它们可能给仍依赖 ZoneJS 的应用引入性能回退。SSR 场景下的 PendingTasksZoneless 应用的 SSR 不再依赖 ZoneJS 判断稳定而改用PendingTasks服务存在应阻止序列化的异步任务时框架会等待所有挂起任务移除后的第一个时刻才进行序列化。两种最直接的用法const taskService inject(PendingTasks); taskService.run(async () { const someResult await doSomeWorkThatNeedsToBeRendered(); this.someState.set(someResult); });const taskService inject(PendingTasks); const taskCleanup taskService.add(); try { await doSomeWorkThatNeedsToBeRendered(); } catch { // handle error } finally { taskCleanup(); }此外rxjs-interop包中的pendingUntilEvent辅助函数可保证应用在该 observable 发射、完成、出错或退订前保持不稳定readonly myObservableState someObservable.pipe(pendingUntilEvent());。框架内部也使用该服务阻止序列化包括进行中的 Router 导航和未完成的HttpClient请求。响应式表单的特殊性setValue、patchValue、FormArray.push等更新 API 会更新表单状态并发射表单 observable但不会自动调度组件变更检测。Zoneless 应用中模板若依赖响应式表单状态需要把表单 observable 接到变更检测通知如调用ChangeDetectorRef.markForCheck()或把数据经由模板消费的 signal 反映出来。测试与验证工具TestBed在加载了zone.jspolyfill 时默认走 Zone 变更检测zone.js不在时默认 Zoneless也可以在加载了 zone.js 时用providers: [provideZonelessChangeDetection()]强制 Zoneless。为让测试行为贴近生产应尽量避免fixture.detectChanges()它强制运行变更检测掩盖了通知机制缺失的问题改用await fixture.whenStable()。另外Angular 提供了provideCheckNoChangesConfig({exhaustive: true, interval: milliseconds})周期性检查是否存在未收到通知却被更新的绑定一旦发现即抛出ExpressionChangedAfterItHasBeenCheckedError是验证应用是否真正 Zoneless 兼容的实用工具。3.2 慢计算优化模板中的昂贵表达式大数组过滤、深拷贝、字符串拼接等与生命周期钩子如ngOnChanges中的同步计算会在每次变更检测周期中反复执行。慢计算最佳实践指导如何在剖析发现某组件拖慢变更检测后识别这些昂贵计算并将其移出热路径缓存结果、改用 computed signal、拆分为按需执行等。3.3 用 OnPush 跳过组件子树跳过子树指南讲解ChangeDetectionStrategy.OnPush的用法满足触发条件之一时刷新组件从而跳过整棵未变化的组件子树。它是运行时性能的主要控制旋钮同时也是 Zoneless 迁移的推荐兼容手段见 3.1 节两者结合使用效果最佳。3.4 Zone 污染仍基于 Zone 的应用中第三方库的定时器、requestAnimationFrame等异步源会被 ZoneJS 误判为应用状态可能变化引发大量不必要的变更检测。Zone 污染指南给出识别与隔离手段如把耗时/高频异步工作放到 Zone 之外运行。从源码结构看ZoneJS 在本仓库packages/zone.js/中维护其lib/目录包含对各浏览器 API 的 patch 实现这正解释了为何某些新 API 的 patch 缺失或降级会引发兼容问题。四、度量性能先剖析再优化识别优化什么与如何优化同等重要。Angular 与浏览器开发者工具集成帮助你定位瓶颈工具作用Chrome DevTools 剖析在浏览器剖析数据旁记录 Angular 专属的性能数据提供颜色编码的火焰图展示组件渲染、变更检测周期与生命周期钩子Angular DevTools浏览器扩展提供组件树检查器component tree inspector和可视化变更检测周期的性能分析器Chrome DevTools 的 Angular track 是不确定从哪里开始时的第一站它把变更检测周期、组件生命周期等框架内部活动与浏览器 Performance 面板对齐让你能直接看到哪个组件的哪段逻辑在吃 CPU。五、应该先优化什么官方总览给出的决策路径是先剖析再动手——用 Chrome DevTools 的 Angular track 找出具体瓶颈然后按症状对号入座首屏加载慢Slow initial load用defer把大组件从主 bundle 中拆出去用图片优化能力NgOptimizedImage见 图片优化指南优先加载首屏内图片用 服务端渲染 更快地交付内容。加载后交互慢Slow interactions after load确认是否已启用 Zoneless 变更检测v21 为默认检查模板或生命周期钩子中的 慢计算考虑使用OnPush减少不必要的变更检测若仍基于 Zone排查 Zone 污染。六、小结Angular 的性能优化体系可以概括为一条主线用分包路由懒加载、defer、injectAsync和交付策略图片优化、SSR 增量 hydration压缩加载时间用变更检测的精准调度Zoneless、OnPush、消除慢计算与 Zone 污染压低运行时开销再用 Chrome DevTools 的 Angular track 与 Angular DevTools 持续度量验证。建议的实践顺序是先运行剖析确认瓶颈属于加载还是运行时再从上表选取对应的单点技术落地最后用provideCheckNoChangesConfig({exhaustive: true})这类工具持续守护 Zoneless 兼容性防止优化成果随代码演进回退。【免费下载链接】angularDeliver web apps with confidence 项目地址: https://gitcode.com/GitHub_Trending/an/angular创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考