建设部网站令第77号,国内云服务器免费,设计师接私单做网站,网站访客qq抓取Angular 性能优化实战
Angular 是一个非常强大的前端框架#xff0c;但是如果不注意性能优化#xff0c;应用程序可能会变得非常慢并增加加载时间。 以下是一些Angular性能优化经验的实战建议#xff1a;
1. 使用 OnPush 变更检测策略
默认情况下#xff0c;Angular检查…Angular 性能优化实战
Angular 是一个非常强大的前端框架但是如果不注意性能优化应用程序可能会变得非常慢并增加加载时间。 以下是一些Angular性能优化经验的实战建议
1. 使用 OnPush 变更检测策略
默认情况下Angular检查应用程序中发生的所有数据更改从而导致性能下降。为了解决这个问题可以使用OnPush变更检测策略这将只在输入绑定值发生更改时才启动变更检测。这个策略只适用于具有Input() properties的组件并且需要手动设置。
import {Component, ChangeDetectionStrategy} from angular/core;Component({selector: app-sample-component,templateUrl: ./sample.component.html,styleUrls: [./sample.component.scss],changeDetection: ChangeDetectionStrategy.OnPush
})
export class SampleComponent {// ...
}定义一个组件并设置 changeDetection 选项为 OnPush 如上所述。
2. 使用轻量级的管道
Angular中的管道可以用来转换数据并在模板中显示不同的输出。使用轻量级的管道可以提高Angular应用的性能。
一个经典的例子是将日期格式化为特定的字符串形式。我们可以使用内置的DatePipe管道来实现这一点但是它可能会导致性能问题。相反我们可以编写一个自定义的轻量级管道来执行相同的任务
import { Pipe, PipeTransform } from angular/core;Pipe({name: customDate
})
export class CustomDatePipe implements PipeTransform {transform(value: any): string {const date new Date(value);return ${date.getDate()}/${date.getMonth() 1}/${date.getFullYear()};}
}在模板中使用这个自定义管道
p{{ myDate | customDate }}/p在 Angular 中使用管道来转换数据是很方便的但是需要注意的是某些管道可能会对性能产生负面影响。建议遵循以下规则使用轻量级的管道
尽可能使用纯管道 纯管道指输入不变时输出永远不变的管道它们只在输入发生变化时进行计算在模板中绑定的表达式将不会多次被执行。避免使用复杂管道 复杂管道需要更多的计算资源因此应该尽可能避免使用它们。当您必须使用复杂管道时应该将其结果缓存起来以便在需要时可以重用它们。
import {Pipe, PipeTransform} from angular/core;Pipe({name: uppercase})
export class UpperCasePipe implements PipeTransform {transform(value: string): string {return value.toUpperCase();}
}这样做的好处是这个自定义管道没有过多的附加操作或计算因此它比内置的DatePipe稍微快一些从而提高了整个应用程序的性能。
3. 使用懒加载模块
在 Angular 中懒加载模块可以帮助你分割应用程序并提高加载时间。使用懒加载模块可以将某些代码推迟到用户需要时才加载。
为了使模块成为懒加载模块你需要在路由中使用 loadChildren 而不是 component 属性。
const routes: Routes [{path: lazy,loadChildren: () import(./lazy/lazy.module).then(m m.LazyModule)}
];4. 使用 trackBy 帮助 ngFor 优化
当使用 ngFor 循环渲染数组或列表时如果数据发生变化“脏检查”机制会触发重新渲染所有列表项。
通过使用 trackBy 函数可以告诉 Angular 如何跟踪列表项的变化从而避免不必要的渲染。
ulli *ngForlet item of items; trackBy: itemTrackByFn{{ item }}/li
/ulitemTrackByFn(index, item) {return item.id;
}5. 避免在引用类型中改变对象的属性
在 Angular 应用程序中通过在组件和服务之间传递引用类型可以轻松地共享数据。
但是如果你试图修改已经在其他地方使用的对象的属性则所有对该对象的引用都将受到影响这可能导致不必要的变更检测。
为了避免这种情况尽量避免直接修改对象的属性而是使用 Object.assign() 或 spread 运算符创建新对象。
const user { id: 1, name: John Doe, email: johnexample.com };// 不好的写法
this.userService.updateUser(user.id, user.name);
user.email new-emailexample.com;// 好的写法
this.userService.updateUser(user.id, user.name, { email: new-emailexample.com });6. 使用虚拟滚动
当你需要处理大量数据时虚拟滚动可以帮助你实现快速、流畅的滚动体验而无需渲染整个列表。
Angular CDK 提供了一个名为 CdkVirtualScrollViewport 的指令它可以帮助你实现虚拟滚动。
cdk-virtual-scroll-viewport itemSize50 classexample-viewportdiv *cdkVirtualForlet item of items classexample-item{{item}}/div
/cdk-virtual-scroll-viewport以上是一些 Angular 性能优化的实战其中一些技术可以单独应用同时使用全部技巧可以帮助你最大程度地提高 Angular 应用程序的性能并改善用户体验。
7. 开启 AOT 编译
开启 AOT 编译可以大大提高应用程序的性能。AOT 编译将在构建期间对组件/指令和模板进行编译并将生成的 JavaScript 代码直接注入到 HTML 模板中。这意味着在运行时浏览器不再需要编译模板从而减少启动时间和加载时间。
具体来说以下是如何开启 AOT 编译
在 Angular CLI 中使用 --aot 选项构建您的应用程序ng build --aot在 Angular 应用程序中配置 JIT 编译器以便像 AOT 所做的那样提前编译组件
NgModule({// ...providers: [{provide: COMPILER_OPTIONS,useValue: {providers: [{useClass: JitCompiler}]},multi: true}],// ...
})
export class AppModule {}以上是一些 Angular 性能优化的实战其中一些技术可以单独应用也可以同时使用它可以帮助你最大程度地提高 Angular 应用程序的性能并改善用户体验。
