Angular 性能优化实战

这篇具有很好参考价值的文章主要介绍了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 如何跟踪列表项的变化,从而避免不必要的渲染。

<ul>
  <li *ngFor="let item of items; trackBy: itemTrackByFn">{{ item }}</li>
</ul>
itemTrackByFn(index, item) {
  return item.id;
}

5. 避免在引用类型中改变对象的属性

在 Angular 应用程序中,通过在组件和服务之间传递引用类型,可以轻松地共享数据。

但是,如果你试图修改已经在其他地方使用的对象的属性,则所有对该对象的引用都将受到影响,这可能导致不必要的变更检测。

为了避免这种情况,尽量避免直接修改对象的属性,而是使用 Object.assign()spread 运算符创建新对象。

const user = { id: 1, name: 'John Doe', email: 'john@example.com' };

// 不好的写法
this.userService.updateUser(user.id, user.name);
user.email = 'new-email@example.com';

// 好的写法
this.userService.updateUser(user.id, user.name, { email: 'new-email@example.com' });

6. 使用虚拟滚动

当你需要处理大量数据时,虚拟滚动可以帮助你实现快速、流畅的滚动体验,而无需渲染整个列表。

Angular CDK 提供了一个名为 CdkVirtualScrollViewport 的指令,它可以帮助你实现虚拟滚动。

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-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 应用程序的性能并改善用户体验。文章来源地址https://www.toymoban.com/news/detail-649319.html

到了这里,关于Angular 性能优化实战的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

    🎉欢迎来到Java学习路线专栏~探索2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java学习路线 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 🍹文章作者技术和水

    2024年02月11日
    浏览(47)
  • 二甲医院信息管理系统源码 his系统源码 java+Angular+JavaScript

    云HIS系统采用SaaS软件应用服务模式,提供软件应用服务多租户机制,实现一中心部署多机构使用。主要包含收费计费、药品管理、门诊医生工作站、住院医生工作站、护士工作站、数据统计、电子病历、医保接口等功能,能够满足医院及诊所日常业务开展的需要。     设计

    2024年02月11日
    浏览(42)
  • 关于 Angular 和 Node.js 版本的问题

    只有 Angular 12 才支持 Node.js 16 吗?Angular 10 呢? StackOverflow 有朋友抱怨关于 Angular 和 Node.js 版本的问题: 我的实际工作中,经常不得不启动旧的 Angular 项目,其中包含已弃用的 Angular 依赖项。 因为我经常运行最新的 Node.js 版本(至少是最新的 LTS 版本),所以我经常遇到无法

    2024年02月04日
    浏览(46)
  • Angular系列教程之zone.js和NgZone

    在Angular中,zone.js是一个非常重要的库,它为我们提供了一种跟踪和管理异步操作的机制。它的核心概念是Zone,它可以帮助我们捕获和处理异步操作的上下文。 当我们执行异步操作(例如定时器、网络请求或者订阅Observables)时,往往需要确保这些操作可以正确地传播并影响

    2024年01月17日
    浏览(42)
  • 一文了解Angular、React 和 Vue.js的区别

    前端开发人员在开始一个新项目时首先要回答的问题是:我应该选择哪个框架? 哪个框架更适合我的需求? 在本文中,我们将向您快速概述当前使用的最常见的前端框架,旨在帮助您选择最能满足您需求的框架。这些框架是 Angular、React和 Vue.js。   一、介绍 Angular是一个包

    2024年02月08日
    浏览(53)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(91)
  • 如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月07日
    浏览(56)
  • 深入Angular:(转&翻)Do you still think that NgZone (zone.js) is required for change detection in Angular?

    原文链接:IndepthApp 前言概览:注意区分NgZone和zone.js, 更多细节在Angular跟新策略篇,尚未翻译完成。 本文主要解释了Angular是如何基于zone.js实现NgZone。 同时阐述如何在不使用zone.js的情况下,实现手动更新。文章最后部分将描述自动跟新策略何时会失效。 我看过的大多数文章

    2024年01月16日
    浏览(52)
  • 如何在 Angular 中使用 ng2-charts 来使用 Chart.js

    介绍 Chart.js 是一个流行的 JavaScript 图表库, ng2-charts 是 Angular 2+ 的一个包装器,用于在 Angular 中集成 Chart.js。 在本教程中,您将使用 Chart.js 和 ng2-charts 在 Angular 应用程序中创建示例图表。 要完成本教程,您需要: 本地安装了 Node.js,您可以按照《如何安装 Node.js 并创建本地

    2024年02月20日
    浏览(44)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包