狠狠撸

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
? まずは、自分のアプリの$scopeにどれくらい$$watcher
がいるかチェックしてみる
? $scope.$$watcherの総数を数える
? note.muでは…

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
? データの更新が必要ないなら、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についての話です

狠狠撸

One Time Binding & Digest Loop

Recommended

More Related Content

What's hot (20)

Similar to One Time Binding & Digest Loop (20)

More from Kon Yuichi (6)

Recently uploaded (8)

One Time Binding & Digest Loop