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.

AngularJSの高速化

7,657 views

Published on

2014/8/22 第二回 html5minutes
LTのスライドです

Published in: Software

AngularJSの高速化

  1. 1. Speeding up AngularJS @konpyu! html5minute! 2014.8.22
  2. 2. 自己紹介 • KON Yuichi (@konpyu)! • Software Engineer in peace of cake! • Love Angular! • SNS note: AngularでClient構築
  3. 3. Frontend MV*
  4. 4. TodoMVC Benchmark http://vuejs.org/perf/
  5. 5. そもそも遅い
  6. 6. なぜか
  7. 7. 2way data binding ViewModel View ・js が保持するデータと HTML として画面に表示さ れる内容が双方向で自動的に連携 ・大規模なSPA, WebAppで実装コストを削減可
  8. 8. 2way data binding よくあるFW → 専用のクラスを継承して手動でBindingを設定 AngularJS → PureなJavascript ObjectをViewModelとして扱う $scope ↑この方
  9. 9. 2way data binding <p>{{ user.name }}</p> html
  10. 10. 2way data binding <p>{{ user.name }}</p> $scope.user.name = “konpyu”; html js
  11. 11. 2way data binding 楽すぎる! <p>{{ user.name }}</p> $scope.user.name = “konpyu”; html js
  12. 12. 2way data binding html <input type=“text” ng-model=“name”>
  13. 13. 2way data binding html <input type=“text” ng-model=“name”>
  14. 14. 2way data binding 楽すぎる! <input type=“text” ng-model=“name”> alert($scope.name); html js
  15. 15. Dirty Checking $scopeはPureなjavascript object → 値に何らかの変更があったかは言語の機能では検出 できない → Object.observe() はよ! ! Angularでは… 特定のタイミングで$scopeに変更があったか否かを $scopeの内容をすべて前後比較してチェック → digest loopと呼ぶ
  16. 16. なので、方針としては 1) 1回のdigest loopにかかる時間を減らそう 2) digest loopが起こる回数を減らそう
  17. 17. dirty checkingの対象を減らそう 変更あったで 変更あったで digest loop 対象が2000を超えると遅延が目立つと言われている http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933
  18. 18. dirty checkingの対象を減らそう 変更あったで 変更あったで digest loop 対象が2000を超えると遅延が目立つと言われている http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933
  19. 19. one-time binding version 1.3では値の変更が無さそうなものは最初の1回 しか評価しないように設定できる ! 余計な前後比較の数を減らせるので処理時間が減る - Official Doc https://docs.angularjs.org/guide/expression#one-time-binding
  20. 20. one-time binding
  21. 21. one-time binding 変わる可能性アリ 変わる可能性アリ
  22. 22. one-time binding 多分変わらない 多分変わらない 多分変わらない
  23. 23. one-time binding one-time bindingにしたい変数の前に::を付けるだけ
  24. 24. bindonce ・one-time bindingは1.3での実装 ・1.2系でも、同様のコンセプトのDirectiveがいくつか 公開されている ・Pasvaz/bindonce  https://github.com/Pasvaz/bindonce
  25. 25. 重たいFilter ・Filterは便利だが、digest loopごとに計算されるので 重たい処理を挟むと時間がかかる ・Custom Filterを作る時は実行時間を意識する ・どうしようもなければ事前計算する
  26. 26. digest loopが起こる回数を 減らそう digest loopが起こるタイミング ! 1) DOMイベントが発生した時 2) $html,$resourceでレスポンスが返ってきた時 3) $locationで遷移が行われる時 4) $timeoutで指定秒が経った時
  27. 27. $timeoutは必要? ・$timeoutはsetTimeoutのwrapper ・setTimeoutとの違いは、tick時にdigest loopが走るか ・tick時に$scopeの変更がないのであれば、setTimeoutにした 方が余計なdigest loopが走らない ・もしくは、$timeoutの第三引数にfalseをsetするとdigest loop が走らない ← (例)10s後にPVを加算するAPIを call。tick時にDOMの書き換えは無 くdigest loopを走らせる必要がな いので第三引数をfalseにしてskip
  28. 28. API Callはなるべく1本に ・当たり前といえば当たり前だが… ・$http, $resourceでデータをfetchした時にdigest loop が走るため、画面構築時に何本もAPIを呼ぶとdigest loop が多く走ってしまう
  29. 29. まとめ ・Angularの2way data bindingはPureなJS Objectが ViewModelになります ・PureなJS Objectに変化があったか否かは現状のjsの仕様では 検知できないので、無理やり前後比較をします(Dirty Checking) ・watch対象が増えるとdigest loopにかかる時間が増えて重く なります ・digest loopにかかる時間と、発生頻度を減らす事が高速化の 基本方針です

×