1.
One Time Binding
& Digest Loop
@konpyu
ng-japan 2015/03/21

2.
• KON Yuichi (@konpyu)
• Software Engineer in peace of cake
• note.mu : build with angular
自己紹介

3.
Performance Issue
• $scopeに大量のデータを突っ込んでいませんか?
• 1回のdigest loopで比較する要素数が増えてしまう
• $scopeに紐づく要素数が2kを超えたあたりからパフォー
マンスが劣化（目安）

4.
Let’s Count $$watcher

5.
Let’s Count $$watcher
• まずは、自分のアプリの$scopeにどれくらい$$watcher
がいるかチェックしてみる
• $scope.$$watcherの総数を数える
• note.muでは…

6.
Let’s Count $$watcher

7.
Let’s Count $$watcher
• 注: $compile.debugInfoEnabled(false)している場合は、
consoleからangular.reloadWithDebugInfo()を叩いてreload
し、デバッグ情報を付与した状態にしておく

8.
One Time Binding
• 最初の1回しかbindingしない
• 2回目以降はdigest loopの対象から外れる
• 値が変わる必要がないデータに適応するとよい
• 1.3から導入. 1.2ではbindonceで同様の事が出来る（kibanaでも採用)

9.
基本形
• bind対象のまえに :: をつけます

10.
論理積・和
• : :is_hoge && : :is_fuga ではない
• 全体を()でくくって、そのまえに: :

11.
ng-class
• { selected : ::is_selected } ではない
• { }の前に、 : : をつける

12.
くわしくはQiitaで
• よくある例をまとめときました
• One Time Bindingがデフォルトになってるモードがほしい
http://qiita.com/konpyu/items/6a29592e45e2340cc34f

13.
Next, Let’s count digest loop
• digest loopを必要以上に発生させない
• 少なくとも、どのタイミングでdigest loopが発生してし
まうかは把握して実装するとよい
• digest loopの発生回数をカウントしてみましょう

14.
Timing of starting digest loop
•$http $resourceのレスポンス受信時
•locationの変更時
•$timeoutのtick時
•DOMイベント（ng-click, ng-keydown etc)

15.
Let’s count digest loop
• digest loopが走る際に、$watch内の関数が評価される
• このタイミングでカウントアップすればよい
• note.muでは…

16.
Let’s count digest loop

17.
Let’s count digest loop
• データの更新が必要ないなら、digest loopを回さなくてよい
• $timeoutの第三引数にfalseを指定
• なるべくAPIを呼ぶ回数を減らす（まとめる）
• web workerに逃がす (https://www.youtube.com/watch?
v=lceLw8ROUP8)

18.
レスポンスを握りつぶせるAjaxは$httpを避ける
•$http, $resourceではレスポンスが返ってくると
digest loopが走ってしまう
•返り値が必要ない場合はjQueryでAjaxしている
•行動の記録系のAPIとか
•Angular wayでAPI call後のdigestを避ける方法をご存
知でしたらそっと教えて下さい

19.
まとめ
・まずは、あなたのサービスのwatcherの数、digest
loopの数をチェックしてみてください
!
・digest loopの回数 1周にかかる時間 を減らそう
!
・one time bindingが有効です
!
・digest loopが起こる場所を把握して、場合によっ
てはangular way以外の選択肢を考えるのもあり
!
注）これらは全て1系のAngularについての話です