2022年の5つのAngularパフォーマンスの強化

Jul 25 2022
遅れて遅いAngularアプリのパフォーマンスを向上させる5つの方法を学びましょう。
Angularアプリケーションの一部がまだ遅いのはなぜですか?この記事では、アプリケーションのパフォーマンスを向上させる方法を紹介します。Angularアプリケーションが遅くて遅いと思いますが、それらを強化する方法がわかりませんか?この記事に直接飛び込んで、アプリケーションのパフォーマンスを向上させる5つの方法について学びましょう。

Angularアプリケーションの一部がまだ遅いのはなぜですか?この記事では、アプリケーションのパフォーマンスを向上させる方法を紹介します。

Angularアプリケーションが遅くて遅いと思いますが、それらを強化する方法がわかりませんか?この記事に直接飛び込んで、アプリケーションのパフォーマンスを向上させる5つの方法について学びましょう。

1.ngZone

多くの開発者は、アプリケーションのパフォーマンスを向上させるためにAngularチームが提供するこのサービスを見逃していました。デフォルトでは、setTimeoutrequestAnimationFrameなどのすべての非同期操作はAngularゾーン内にあります。つまり、コンポーネントで変更検出がトリガーされ、コンポーネントが巨大な場合はWebサイトの速度が低下します。したがって、非同期関数がDOMでの変更検出を必要としない場合は、コールバック関数と呼ばれるメソッドを使用してサービス内で非同期関数を実行できます。ngZonerunOutsideAngular

2.コンポーネントの分割

コンポーネントがアクティブ(スマート)セクションと非アクティブ(ダム)セクションで構成されている場合は、それらをリファクタリングして、スマートコンポーネントとダムコンポーネントに分割することを検討する必要があります。たとえば、次の例では、

入力とデータのリストがあります。入力セクションは、ユーザーが入力するとキーイベントアクションをトリガーし続け、リストセクションに何も行われていなくても、コンポーネント全体の変更検出チェックをトリガーします。リストが複雑なリストであり、変更の検出にコストがかかる可能性があると想像してください。

したがって、より良いアプローチは、入力セクションとリストセクションを2つの別々のコンポーネントに分割し、それを親コンポーネントの下に配置することです。このように、InputComponentのキーイベントは、ListComponentの変更検出に影響を与えたり、トリガーしたりすることはありません。リストデータが巨大で複雑な計算がたくさん含まれている場合は、パフォーマンスを大幅に節約できます。

3.onPush

上記のコンポーネントポイントの分割に加えて、コンポーネントのchangeDetection戦略を調整して、コンポーネントのパフォーマンスを向上させることもできます。デフォルトでは、Angular CLIを使用してコンポーネントを作成すると、デフォルトのchangeDetectionストラテジーがになりOnDefault、そのコンポーネントのデータに変更があるたびにDOMが更新されます。Angularは、コンポーネントのツリー内の変更をチェックします。したがって、親要素またはルート要素に変更があった場合、その子および孫コンポーネントのDOMの更新がトリガーされます。

ListComponent changeDetectionストラテジーを更新してOnPush、Angularが必要なときにのみDOMをチェックして更新するようにすることができます。

ChangeDetectorRefをコンポーネントコンストラクターに挿入し、markForCheck()メソッドを呼び出してコンポーネントとその下の子コンポーネントに変更をチェックし、それに応じてDOMを更新するように強制します。さらに、この親/ルートコンポーネントのコンポーネントのツリーに、データの変更に関係なくDOMの更新を必要としない子コンポーネント(ダムコンポーネント)がある場合は、 detach()メソッドを使用してchangeDetectorをコンポーネントからデタッチすることを選択できます。 。

コンポーネントにchangeDetectorRefを挿入します。

コンストラクターでメソッドを呼び出しdetachて、コンポーネントを変更検出から切り離します。この小さな変更により、メモリを大幅に節約し、コンポーネントの再レンダリングサイクルを最適化できます。

4.メソッドの代わりにパイプを使用する

角度のあるテンプレートのバインドは素晴らしいです。変数をバインドしたり、そのテンプレートに機能させたりすることができます。私のような多くの人は、関数呼び出しを使用してデータを変換します。これは、実装が便利で簡単だからです。

例:リストへの追加アイテムの入力
関数呼び出し
パイプの実装

上記の簡単な例を見ると、違いに気付くことはありません。しかし、リストに新しいアイテムが1つ追加されるたびに、リスト内のすべてのアイテムに対して関数呼び出しが呼び出され、リスト内のアイテムの値が変更されたときにのみパイプが呼び出されることをご存知ですか?したがって、実際に何をしているのかがわからない限り、テンプレートで関数呼び出しを行うことは絶対に避けてください。代わりに、データ変換を処理するために常に独自のカスタム純粋パイプを作成することを選択してください。

5.データセットの長いリストには、仮想スクロールまたは無限スクロールまたはページ付けを使用します

管理者ユーザーまたは顧客のために表示する必要のあるアイテムの長いリストがありますか?ブラウザがWebアプリで100以上のDOMアイテムをレンダリングするのに時間がかかりすぎていませんか?Webアプリで仮想スクロールまたは無限スクロール戦略を使用することを検討するときが来ました。仮想および無限スクロールは、ユーザーが表示できるアイテムを表示するために、ブラウザーでDOM要素を再利用およびリサイクルするのに役立ちます。リストに非表示になっているアイテムはDOMに含まれないため、Webアプリのレンダリング時間を節約できます。これらの戦略は、特定の長いアイテムリストでユーザーに表示するDOM要素の数を最適化し、そのスクロールポイントでビューにないアイテムをリストに表示しないようにするのに役立ちます。ここでの詳細については退屈させません。

Angular Materialまたはngx-virtual-scrollを使用して、仮想スクロールの詳細を確認できます。ngx-infinite-scrollを使用して、無限スクロールの詳細を確認することもできます。または、以下のこのWebサイトにアクセスして、スクロール可能なアイテムの長いリストを最適化するために使用できるプラグインとツールをさらに見つけることができます。

ボーナス

Angular Devtools Chrome拡張機能をインストールして、コンポーネントをテストおよび開発するときにブラウザーでコンポーネントのパフォーマンスを測定できることをご存知ですか?

Angular devtools

拡張機能をインストールしたら、chrome devツールを開いて、chromedevツールのタブのリストでAngularを探すことができます。アプリケーションでアクションの記録と実行を開始し、記録を停止して、パフォーマンスがオーバーホールされたアクションを分析できます。

概要

この記事が、Angularアプリケーションのパフォーマンスを向上させる方法についての手がかりを与えてくれることを願っています。上記の5つのポイントとAngulardevtools拡張機能を使用して、アプリケーションのパフォーマンスの低下を特定します。

Angularアプリケーションの最適化に役立つ他のパフォーマンス強化のヒントがある場合は、以下のコメントでお知らせください。私もそれについて学びたいです。乾杯!

PlainEnglish.ioのその他のコンテンツ無料の週刊ニュースレターにサインアップしてくださいTwitterLinkedInでフォローしてくださいCommunity Discordをチェックして、TalentCollectiveに参加してください

© Copyright 2021 - 2022 | hachiwiki.com | All Rights Reserved