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

More Related Content

What's hot

なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかYoichi Toyota
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSAyumi Goto
 
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVMVue.jsでさくっとMVVM
Vue.jsでさくっとMVVMSatoshi Anai
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」Naoyuki Kataoka
 
今からでも遅くない! React事始め
今からでも遅くない! React事始め今からでも遅くない! React事始め
今からでも遅くない! React事始めynaruta
 
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門Kohei Kadowaki
 
AngularJSを浅めに紹介します
AngularJSを浅めに紹介しますAngularJSを浅めに紹介します
AngularJSを浅めに紹介しますnkazuki
 
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)Takahiro Maki
 
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるAngular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるMasashi Haga
 
3分でわかるangular js
3分でわかるangular js3分でわかるangular js
3分でわかるangular jsShin Adachi
 
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門spring_raining
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会VOYAGE GROUP
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScripthideaki honda
 
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?IRI MO
 
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おうHayashi Yuichi
 
はじめてのVue.js
はじめてのVue.jsはじめてのVue.js
はじめてのVue.jskamiyam .
 

What's hot (20)

Alt01-LT
Alt01-LTAlt01-LT
Alt01-LT
 
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのかなぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
 
20160927 reactmeetup
20160927 reactmeetup20160927 reactmeetup
20160927 reactmeetup
 
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVMVue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
 
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
 
今からでも遅くない! React事始め
今からでも遅くない! React事始め今からでも遅くない! React事始め
今からでも遅くない! React事始め
 
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
 
AngularJSを浅めに紹介します
AngularJSを浅めに紹介しますAngularJSを浅めに紹介します
AngularJSを浅めに紹介します
 
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
 
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべるAngular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
 
3分でわかるangular js
3分でわかるangular js3分でわかるangular js
3分でわかるangular js
 
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
 
AngularJS入門
AngularJS入門AngularJS入門
AngularJS入門
 
React.js + Flux
React.js + FluxReact.js + Flux
React.js + Flux
 
Flux react現状確認会
Flux react現状確認会Flux react現状確認会
Flux react現状確認会
 
jQueryを中心としたJavaScript
jQueryを中心としたJavaScriptjQueryを中心としたJavaScript
jQueryを中心としたJavaScript
 
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
 
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
 
はじめてのVue.js
はじめてのVue.jsはじめてのVue.js
はじめてのVue.js
 

Viewers also liked

Angularjs - lazy loading techniques
Angularjs - lazy loading techniques Angularjs - lazy loading techniques
Angularjs - lazy loading techniques Nir Kaufman
 
スキスキIonic
スキスキIonicスキスキIonic
スキスキIonicKon Yuichi
 
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIGHayashi Yuichi
 
Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs Nir Kaufman
 
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしましたMitsuru Ogawa
 
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJSMizuho Sakamaki
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリアシアル株式会社
 
AngularJS入門の巻2
AngularJS入門の巻2AngularJS入門の巻2
AngularJS入門の巻2Toshio Ehara
 
Enterprise x AngularJS
Enterprise x AngularJSEnterprise x AngularJS
Enterprise x AngularJSKenichi Kanai
 
noteをAngularJSで構築した話
noteをAngularJSで構築した話noteをAngularJSで構築した話
noteをAngularJSで構築した話Kon Yuichi
 
HTTP/2の現状とこれから
HTTP/2の現状とこれからHTTP/2の現状とこれから
HTTP/2の現状とこれからshigeki_ohtsu
 
Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原
Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原
Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原Koji Shiraishi
 
深層学習フレームワーク Chainer の開発と今後の展開
深層学習フレームワーク Chainer の開発と今後の展開深層学習フレームワーク Chainer の開発と今後の展開
深層学習フレームワーク Chainer の開発と今後の展開Seiya Tokui
 
Interaksi antar komponen biotik
Interaksi antar komponen biotikInteraksi antar komponen biotik
Interaksi antar komponen biotikDevita Sagita
 

Viewers also liked (14)

Angularjs - lazy loading techniques
Angularjs - lazy loading techniques Angularjs - lazy loading techniques
Angularjs - lazy loading techniques
 
スキスキIonic
スキスキIonicスキスキIonic
スキスキIonic
 
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
 
Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs
 
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
 
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
 
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリAngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
 
AngularJS入門の巻2
AngularJS入門の巻2AngularJS入門の巻2
AngularJS入門の巻2
 
Enterprise x AngularJS
Enterprise x AngularJSEnterprise x AngularJS
Enterprise x AngularJS
 
noteをAngularJSで構築した話
noteをAngularJSで構築した話noteをAngularJSで構築した話
noteをAngularJSで構築した話
 
HTTP/2の現状とこれから
HTTP/2の現状とこれからHTTP/2の現状とこれから
HTTP/2の現状とこれから
 
Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原
Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原
Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原
 
深層学習フレームワーク Chainer の開発と今後の展開
深層学習フレームワーク Chainer の開発と今後の展開深層学習フレームワーク Chainer の開発と今後の展開
深層学習フレームワーク Chainer の開発と今後の展開
 
Interaksi antar komponen biotik
Interaksi antar komponen biotikInteraksi antar komponen biotik
Interaksi antar komponen biotik
 

Similar to AngularJSの高速化

VSUGDAY2012 - ASP.NET MVC 4 Deveoper Preview による モバイルWEBアプリケーション開発
VSUGDAY2012 - ASP.NET MVC 4 Deveoper Preview による モバイルWEBアプリケーション開発VSUGDAY2012 - ASP.NET MVC 4 Deveoper Preview による モバイルWEBアプリケーション開発
VSUGDAY2012 - ASP.NET MVC 4 Deveoper Preview による モバイルWEBアプリケーション開発tomotoshi
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介david9142
 
Monacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonaca
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~normalian
 
iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018Shingo Fukuyama
 
2012年8月10日 勉強会
2012年8月10日 勉強会2012年8月10日 勉強会
2012年8月10日 勉強会Rin Yano
 
MEANスタック提案プレゼンテーション
MEANスタック提案プレゼンテーションMEANスタック提案プレゼンテーション
MEANスタック提案プレゼンテーションTakumi Yokoyama
 
Web Standards 2018
Web Standards 2018Web Standards 2018
Web Standards 2018Shogo Sensui
 
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Toshiro Shimizu
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門miso- soup3
 
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた日本マイクロソフト株式会社
 

Similar to AngularJSの高速化 (20)

20120616
2012061620120616
20120616
 
VSUGDAY2012 - ASP.NET MVC 4 Deveoper Preview による モバイルWEBアプリケーション開発
VSUGDAY2012 - ASP.NET MVC 4 Deveoper Preview による モバイルWEBアプリケーション開発VSUGDAY2012 - ASP.NET MVC 4 Deveoper Preview による モバイルWEBアプリケーション開発
VSUGDAY2012 - ASP.NET MVC 4 Deveoper Preview による モバイルWEBアプリケーション開発
 
Mvc conf session_5_isami
Mvc conf session_5_isamiMvc conf session_5_isami
Mvc conf session_5_isami
 
俺とAngular JS 2
俺とAngular JS 2俺とAngular JS 2
俺とAngular JS 2
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
 
iOS WebView App
iOS WebView AppiOS WebView App
iOS WebView App
 
Monacaでつくるハイブリッドアプリ
MonacaでつくるハイブリッドアプリMonacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
 
MVCもやもや話
MVCもやもや話MVCもやもや話
MVCもやもや話
 
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
 
iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018
 
2012年8月10日 勉強会
2012年8月10日 勉強会2012年8月10日 勉強会
2012年8月10日 勉強会
 
ASP.NET MVC 1.0
ASP.NET MVC 1.0ASP.NET MVC 1.0
ASP.NET MVC 1.0
 
110409 slintky lt
110409 slintky lt110409 slintky lt
110409 slintky lt
 
MEANスタック提案プレゼンテーション
MEANスタック提案プレゼンテーションMEANスタック提案プレゼンテーション
MEANスタック提案プレゼンテーション
 
Web Standards 2018
Web Standards 2018Web Standards 2018
Web Standards 2018
 
Angular2
Angular2Angular2
Angular2
 
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
 
Using Windows Azure
Using Windows AzureUsing Windows Azure
Using Windows Azure
 

AngularJSの高速化