Mais conteúdo relacionado
Semelhante a AngularJSの高速化 (20)
AngularJSの高速化
- 2. 自己紹介
• KON Yuichi (@konpyu)!
• Software Engineer in peace of cake!
• Love Angular!
• SNS note: AngularでClient構築
- 8. 2way data binding
ViewModel View
・js が保持するデータと HTML として画面に表示さ
れる内容が双方向で自動的に連携
・大規模なSPA, WebAppで実装コストを削減可
- 9. 2way data binding
よくあるFW
→ 専用のクラスを継承して手動でBindingを設定
AngularJS
→ PureなJavascript ObjectをViewModelとして扱う
$scope
↑この方
- 12. 2way data binding
楽すぎる!
<p>{{ user.name }}</p>
$scope.user.name = “konpyu”;
html
js
- 15. 2way data binding
楽すぎる!
<input type=“text” ng-model=“name”>
alert($scope.name);
html
js
- 18. dirty checkingの対象を減らそう
変更あったで
変更あったで
digest loop
対象が2000を超えると遅延が目立つと言われている
http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933
- 19. dirty checkingの対象を減らそう
変更あったで
変更あったで
digest loop
対象が2000を超えると遅延が目立つと言われている
http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933
- 20. one-time binding
version 1.3では値の変更が無さそうなものは最初の1回
しか評価しないように設定できる
!
余計な前後比較の数を減らせるので処理時間が減る
- Official Doc
https://docs.angularjs.org/guide/expression#one-time-binding
- 27. digest loopが起こる回数を
減らそう
digest loopが起こるタイミング
!
1) DOMイベントが発生した時
2) $html,$resourceでレスポンスが返ってきた時
3) $locationで遷移が行われる時
4) $timeoutで指定秒が経った時
- 30. まとめ
・Angularの2way data bindingはPureなJS Objectが
ViewModelになります
・PureなJS Objectに変化があったか否かは現状のjsの仕様では
検知できないので、無理やり前後比較をします(Dirty
Checking)
・watch対象が増えるとdigest loopにかかる時間が増えて重く
なります
・digest loopにかかる時間と、発生頻度を減らす事が高速化の
基本方針です