One Time Binding & Digest Loop

@konpyu ng-japan 2015/03/21

• KON Yuichi (@konpyu)

• Software Engineer in peace of cake

• note.mu : build with angular

自己紹介

Performance Issue

• $scopeに大量のデータを突っ込んでいませんか?

• 1回のdigest loopで比較する要素数が増えてしまう

• $scopeに紐づく要素数が2kを超えたあたりからパフォーマンスが劣化（目安）

Let’s Count $$watcher

Let’s Count $$watcher

• まずは、自分のアプリの$scopeにどれくらい$$watcher

がいるかチェックしてみる

• $scope.$$watcherの総数を数える

• note.muでは…

Let’s Count $$watcher

Let’s Count $$watcher

• 注: $compile.debugInfoEnabled(false)している場合は、consoleからangular.reloadWithDebugInfo()を叩いてreload

し、デバッグ情報を付与した状態にしておく

One Time Binding

• 最初の1回しかbindingしない

• 2回目以降はdigest loopの対象から外れる

• 値が変わる必要がないデータに適応するとよい

• 1.3から導入. 1.2ではbindonceで同様の事が出来る（kibanaでも採用)

基本形

• bind対象のまえに :: をつけます

論理積・和

• : :is_hoge && : :is_fuga ではない

• 全体を()でくくって、そのまえに: :

ng-class

• { ‘selected’: ::is_selected } ではない

• { }の前に、 : : をつける

くわしくはQiitaで

• よくある例をまとめときました

• One Time Bindingがデフォルトになってるモードがほしい

http://qiita.com/konpyu/items/6a29592e45e2340cc34f

Next, Let’s count digest loop

• digest loopを必要以上に発生させない

• 少なくとも、どのタイミングでdigest loopが発生してしまうかは把握して実装するとよい

• digest loopの発生回数をカウントしてみましょう

Timing of starting digest loop

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

Let’s count digest loop

• digest loopが走る際に、$watch内の関数が評価される

•このタイミングでカウントアップすればよい

• note.muでは…

Let’s count digest loop

Let’s count digest loop

• データの更新が必要ないなら、digest loopを回さなくてよい

• $timeoutの第三引数にfalseを指定

• なるべくAPIを呼ぶ回数を減らす（まとめる）

• web workerに逃がす (https://www.youtube.com/watch?v=lceLw8ROUP8)

レスポンスを握りつぶせるAjaxは$httpを避ける

•$http, $resourceではレスポンスが返ってくると

digest loopが走ってしまう

•返り値が必要ない場合はjQueryでAjaxしている

•行動の記録系のAPIとか

•Angular wayでAPI call後のdigestを避ける方法をご存

知でしたらそっと教えて下さい

まとめ・まずは、あなたのサービスのwatcherの数、digest loopの数をチェックしてみてください !

・digest loopの回数 × 1周にかかる時間 を減らそう !

・one time bindingが有効です !

・digest loopが起こる場所を把握して、場合によってはangular way以外の選択肢を考えるのもあり !注）これらは全て1系のAngularについての話です