Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

One Time Binding & Digest Loop

5,042 views

Published on

ng-japan 2015/03/21

Published in: Technology
  • Be the first to comment

One Time Binding & Digest Loop

  1. 1. One Time Binding & Digest Loop @konpyu ng-japan 2015/03/21
  2. 2. • KON Yuichi (@konpyu) • Software Engineer in peace of cake • note.mu : build with angular 自己紹介
  3. 3. Performance Issue • $scopeに大量のデータを突っ込んでいませんか? • 1回のdigest loopで比較する要素数が増えてしまう • $scopeに紐づく要素数が2kを超えたあたりからパフォー マンスが劣化(目安)
  4. 4. Let’s Count $$watcher
  5. 5. Let’s Count $$watcher • まずは、自分のアプリの$scopeにどれくらい$$watcher がいるかチェックしてみる • $scope.$$watcherの総数を数える • note.muでは…
  6. 6. Let’s Count $$watcher
  7. 7. Let’s Count $$watcher • 注: $compile.debugInfoEnabled(false)している場合は、 consoleからangular.reloadWithDebugInfo()を叩いてreload し、デバッグ情報を付与した状態にしておく
  8. 8. One Time Binding • 最初の1回しかbindingしない • 2回目以降はdigest loopの対象から外れる • 値が変わる必要がないデータに適応するとよい • 1.3から導入. 1.2ではbindonceで同様の事が出来る(kibanaでも採用)
  9. 9. 基本形 • bind対象のまえに :: をつけます
  10. 10. 論理積・和 • : :is_hoge && : :is_fuga ではない • 全体を()でくくって、そのまえに: :
  11. 11. ng-class • { selected : ::is_selected } ではない • { }の前に、 : : をつける
  12. 12. くわしくはQiitaで • よくある例をまとめときました • One Time Bindingがデフォルトになってるモードがほしい http://qiita.com/konpyu/items/6a29592e45e2340cc34f
  13. 13. Next, Let’s count digest loop • digest loopを必要以上に発生させない • 少なくとも、どのタイミングでdigest loopが発生してし まうかは把握して実装するとよい • digest loopの発生回数をカウントしてみましょう
  14. 14. Timing of starting digest loop •$http $resourceのレスポンス受信時 •locationの変更時 •$timeoutのtick時 •DOMイベント(ng-click, ng-keydown etc)
  15. 15. Let’s count digest loop • digest loopが走る際に、$watch内の関数が評価される • このタイミングでカウントアップすればよい • note.muでは…
  16. 16. Let’s count digest loop
  17. 17. Let’s count digest loop • データの更新が必要ないなら、digest loopを回さなくてよい • $timeoutの第三引数にfalseを指定 • なるべくAPIを呼ぶ回数を減らす(まとめる) • web workerに逃がす (https://www.youtube.com/watch? v=lceLw8ROUP8)
  18. 18. レスポンスを握りつぶせるAjaxは$httpを避ける •$http, $resourceではレスポンスが返ってくると digest loopが走ってしまう •返り値が必要ない場合はjQueryでAjaxしている •行動の記録系のAPIとか •Angular wayでAPI call後のdigestを避ける方法をご存 知でしたらそっと教えて下さい
  19. 19. まとめ ・まずは、あなたのサービスのwatcherの数、digest loopの数をチェックしてみてください ! ・digest loopの回数 1周にかかる時間 を減らそう ! ・one time bindingが有効です ! ・digest loopが起こる場所を把握して、場合によっ てはangular way以外の選択肢を考えるのもあり ! 注)これらは全て1系のAngularについての話です

×