angularjs のパフォーマンスの最適化についてどれくらい知っていますか? angularjsのパフォーマンス最適化プロセスの詳細は次のとおりです。

寻∝梦
リリース: 2018-09-07 11:43:12
オリジナル
1029 人が閲覧しました

angularjs については以前から知っていましたが、パフォーマンスの問題についてはあまり考えていませんでした。前回、フィルターについて勉強していたときに、パフォーマンスの問題が関係していました。そこで、一般的に使用されるパフォーマンスの最適化についてもまとめました。一緒に見てみましょうangularjs有一段时间了,但是都没有怎么考虑过性能方面的问题,上次在研究过滤器的时候涉及到了性能问题。所以自己也总结了下常用的性能优化。下面我们一起看看吧

一、优化$watch

1.及时移除不必要的watch

var unWatch = $scope.$watch('', function() {
    // do something
    ...
    if (someCondition) {
        unWatch();    // 取消监听
    }
});
ログイン後にコピー

2.尽量避免深度watch

我们都知道$watch有三个参数,第三个参数为true就是要深度监听的。这个参数主要是在嵌套对象的时候会用到,但是要尽量避免使用,如果你只是想看看基本属性的变化,那么就不要使用第三个参数进行深度的监听,这回大大拖慢每一次监听的时间。

3.ng-if和ng-show

尽量使用ng-if,因为前者不仅会移除DOM,还会移除相应的watch

ng-show只是简单的隐藏,但其实已经加载完成。(想学更多就到PHP中文网angularjs学习手册栏目中学习)

二、$apply和$digest

$apply会使angular进入$digest循环,然后从$rootScope开始遍历,检查变更。

$digest只会检查当前scope以及其子scope

所以,但我们确定某个操作只会影响当前的scope,使用$digest会稍微提升性能。

三、优化ng-repeat

ng-repeat真是使用比较多的指令了,但是好像经常忽略track by

我们的ng-repeat经常就这么写:

ng-repeat="item in items"
ログイン後にコピー

但是如果这么写的话,当我们刷新页面的时候,它会删除所有已有的DOM,然后重新创建和渲染。但是如果我们加上track by就不同了:

ng-repeat="item in item track by item.id"
ログイン後にコピー

这样angular就会复用已有的DOM,然后更新变化的部分。这就减少了不必要的渲染。

四、其他优化

  • console.log很耗时,发布的时候一定要干掉。

  • 慎用filter,可以在controller中预先处理。

  • 尽量避免使用广播事件,可以使用双向数据绑定或者共享service

    1. $watch を最適化します
  • 1. 適切なタイミングで不要なウォッチを削除します

    rreee

    2. $ は誰もが知っています。 watch には 3 つのパラメータがあります。3 番目のパラメータは詳細な監視用の true です。このパラメータは主にオブジェクトをネストするときに使用されますが、基本的なプロパティの変更を確認したいだけの場合は、詳細な監視に 3 番目のパラメータを使用しないでください。これにより、各プロセスが大幅に遅くなります。 1回のリスニングセッションの時間。

3.ng-if と ng-show

ng-if を使用してみてください。前者は DOM だけでなく、対応する watch

そして ng-show は単に非表示になっているだけですが、実際にはロードされています。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトangularjs 学習マニュアル の列にアクセスして学習してください)

2. $apply と $digest

$apply により、angular を使用して <code>$digest ループ に入り、$rootScope から開始してトラバースして変更を確認します。 $digest は、現在の scope とその subscope のみをチェックします。

つまり、特定の操作は現在の scope にのみ影響することは確実であり、$digest を使用するとパフォーマンスがわずかに向上します。

3. ng-repeat を最適化する
ng-repeat は実際には多くの命令を使用しますが、track by は無視されることが多いようです。

私たちの ng-repeat は、次のように書かれることがよくあります:
rrreee

しかし、このように書かれている場合、ページを更新すると、既存の DOM がすべて削除され、再作成されてレンダリングされます。しかし、track by を追加すると話は異なります: 🎜rrreee🎜 このようにして、angular は既存の DOM を 再利用し、変更された部分を更新します。これにより、不必要なレンダリングが削減されます。 🎜🎜4. その他の最適化🎜
  • 🎜console.log は非常に時間がかかるため、公開時に削除する必要があります。 🎜🎜
  • 🎜フィルターは、controller で前処理される可能性があるため、注意して使用してください。 🎜🎜
  • 🎜 ブロードキャスト イベントの使用は避けてください。代わりに、双方向データ バインディングまたは共有 service を使用できます。 🎜🎜🎜🎜 5. angularjs についてのまとめ 🎜🎜 完全にまとめたわけではなく、私がよく使うものだけです。使い込むほどに理解がさらに深まります。 (最後に、PHP 中国語 Web サイトの 🎜angularjs Reference Manual 🎜 コラムをお勧めします。ここでは、学びたい angularjs コンテンツを見つけることができます) 🎜🎜 [編集者のおすすめ] 🎜🎜🎜 angularjs で式を使用するには? angularjs での式の使用例🎜🎜🎜🎜🎜 angularjs と jQuery の違いは何ですか? angularjs と jQuery の結果🎜🎜🎜🎜🎜🎜

以上がangularjs のパフォーマンスの最適化についてどれくらい知っていますか? angularjsのパフォーマンス最適化プロセスの詳細は次のとおりです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
js
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!