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