Submit Search
Upload
AngularJSの高速化
•
23 likes
•
8,638 views
Kon Yuichi
Follow
2014/8/22 第二回 html5minutes LTのスライドです
Read less
Read more
Software
Report
Share
Report
Share
1 of 30
Download Now
Download to read offline
Recommended
AngularJSでの非同期処理の話
AngularJSでの非同期処理の話
Yosuke Onoue
Angular js はまりどころ
Angular js はまりどころ
Ayumi Goto
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
One Time Binding & Digest Loop
One Time Binding & Digest Loop
Kon Yuichi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
More Related Content
What's hot
Alt01-LT
Alt01-LT
Yuta Hiroto
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
Satoshi Anai
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
Masashi Haga
3分でわかるangular js
3分でわかるangular js
Shin Adachi
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
spring_raining
AngularJS入門
AngularJS入門
Kenji Shirane
React.js + Flux
React.js + Flux
dsuke Takaoka
Flux react現状確認会
Flux react現状確認会
VOYAGE GROUP
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
IRI MO
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
はじめてのVue.js
はじめてのVue.js
kamiyam .
What's hot
(20)
Alt01-LT
Alt01-LT
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
20160927 reactmeetup
20160927 reactmeetup
Vue.jsでさくっとMVVM
Vue.jsでさくっとMVVM
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
今からでも遅くない! React事始め
今からでも遅くない! React事始め
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Angular.jsについてちょっとしゃべる
Angular.jsについてちょっとしゃべる
3分でわかるangular js
3分でわかるangular js
React.jsでクライアントサイドなWebアプリ入門
React.jsでクライアントサイドなWebアプリ入門
AngularJS入門
AngularJS入門
React.js + Flux
React.js + Flux
Flux react現状確認会
Flux react現状確認会
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
まだDOM操作で消耗してるの?
まだDOM操作で消耗してるの?
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
はじめてのVue.js
はじめてのVue.js
Viewers also liked
Angularjs - lazy loading techniques
Angularjs - lazy loading techniques
Nir Kaufman
スキスキIonic
スキスキIonic
Kon Yuichi
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Hayashi Yuichi
Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs
Nir Kaufman
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
アシアル株式会社
AngularJS入門の巻2
AngularJS入門の巻2
Toshio Ehara
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
HTTP/2の現状とこれから
HTTP/2の現状とこれから
shigeki_ohtsu
Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原
Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原
Koji Shiraishi
深層学習フレームワーク Chainer の開発と今後の展開
深層学習フレームワーク Chainer の開発と今後の展開
Seiya Tokui
Interaksi antar komponen biotik
Interaksi antar komponen biotik
Devita Sagita
Viewers also liked
(14)
Angularjs - lazy loading techniques
Angularjs - lazy loading techniques
スキスキIonic
スキスキIonic
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Angular js - 10 reasons to choose angularjs
Angular js - 10 reasons to choose angularjs
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
AngularJS入門の巻2
AngularJS入門の巻2
Enterprise x AngularJS
Enterprise x AngularJS
noteをAngularJSで構築した話
noteをAngularJSで構築した話
HTTP/2の現状とこれから
HTTP/2の現状とこれから
Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原
Tech-Circle Pepperで機械学習体験ハンズオン勉強会inアトリエ秋葉原
深層学習フレームワーク Chainer の開発と今後の展開
深層学習フレームワーク Chainer の開発と今後の展開
Interaksi antar komponen biotik
Interaksi antar komponen biotik
Similar to AngularJSの高速化
20120616
20120616
小野 修司
VSUGDAY2012 - ASP.NET MVC 4 Deveoper Preview による モバイルWEBアプリケーション開発
VSUGDAY2012 - ASP.NET MVC 4 Deveoper Preview による モバイルWEBアプリケーション開発
tomotoshi
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
iOS WebView App
iOS WebView App
hagino 3000
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
Monaca
MVCもやもや話
MVCもやもや話
Tetsuya Kaneuchi
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018
Shingo Fukuyama
2012年8月10日 勉強会
2012年8月10日 勉強会
Rin Yano
ASP.NET MVC 1.0
ASP.NET MVC 1.0
Shinpei Ohtani
110409 slintky lt
110409 slintky lt
Takayoshi Tanaka
MEANスタック提案プレゼンテーション
MEANスタック提案プレゼンテーション
Takumi Yokoyama
Web Standards 2018
Web Standards 2018
Shogo Sensui
Angular2
Angular2
Kenichi Kanai
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
Toshiro Shimizu
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 がやってきた
日本マイクロソフト株式会社
Using Windows Azure
Using Windows Azure
Shinji Tanaka
Similar to AngularJSの高速化
(20)
20120616
20120616
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_isami
俺とAngular JS 2
俺とAngular JS 2
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
iOS WebView App
iOS WebView App
Monacaでつくるハイブリッドアプリ
Monacaでつくるハイブリッドアプリ
MVCもやもや話
MVCもやもや話
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
iOS WKWebViewの魔改造 - iOSDC 2018
iOS WKWebViewの魔改造 - iOSDC 2018
2012年8月10日 勉強会
2012年8月10日 勉強会
ASP.NET MVC 1.0
ASP.NET MVC 1.0
110409 slintky lt
110409 slintky lt
MEANスタック提案プレゼンテーション
MEANスタック提案プレゼンテーション
Web Standards 2018
Web Standards 2018
Angular2
Angular2
Progressive Framework Vue.js 2.0
Progressive Framework Vue.js 2.0
2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
【de:code 2020】 「あつまれ フロントエンドエンジニア」 Azure Static Web Apps がやってきた
Using Windows Azure
Using Windows Azure
AngularJSの高速化
1.
Speeding up AngularJS
@konpyu! html5minute! 2014.8.22
2.
自己紹介 • KON
Yuichi (@konpyu)! • Software Engineer in peace of cake! • Love Angular! • SNS note: AngularでClient構築
4.
Frontend MV*
5.
TodoMVC Benchmark http://vuejs.org/perf/
6.
そもそも遅い
7.
なぜか
8.
2way data binding
ViewModel View ・js が保持するデータと HTML として画面に表示さ れる内容が双方向で自動的に連携 ・大規模なSPA, WebAppで実装コストを削減可
9.
2way data binding
よくあるFW → 専用のクラスを継承して手動でBindingを設定 AngularJS → PureなJavascript ObjectをViewModelとして扱う $scope ↑この方
10.
2way data binding
<p>{{ user.name }}</p> html
11.
2way data binding
<p>{{ user.name }}</p> $scope.user.name = “konpyu”; html js
12.
2way data binding
楽すぎる! <p>{{ user.name }}</p> $scope.user.name = “konpyu”; html js
13.
2way data binding
html <input type=“text” ng-model=“name”>
14.
2way data binding
html <input type=“text” ng-model=“name”>
15.
2way data binding
楽すぎる! <input type=“text” ng-model=“name”> alert($scope.name); html js
16.
Dirty Checking $scopeはPureなjavascript
object → 値に何らかの変更があったかは言語の機能では検出 できない → Object.observe() はよ! ! Angularでは… 特定のタイミングで$scopeに変更があったか否かを $scopeの内容をすべて前後比較してチェック → digest loopと呼ぶ
17.
なので、方針としては 1) 1回のdigest
loopにかかる時間を減らそう 2) digest loopが起こる回数を減らそう
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
21.
one-time binding
22.
one-time binding 変わる可能性アリ
変わる可能性アリ
23.
one-time binding 多分変わらない
多分変わらない 多分変わらない
24.
one-time binding one-time
bindingにしたい変数の前に::を付けるだけ
25.
bindonce ・one-time bindingは1.3での実装
・1.2系でも、同様のコンセプトのDirectiveがいくつか 公開されている ・Pasvaz/bindonce https://github.com/Pasvaz/bindonce
26.
重たいFilter ・Filterは便利だが、digest loopごとに計算されるので
重たい処理を挟むと時間がかかる ・Custom Filterを作る時は実行時間を意識する ・どうしようもなければ事前計算する
27.
digest loopが起こる回数を 減らそう
digest loopが起こるタイミング ! 1) DOMイベントが発生した時 2) $html,$resourceでレスポンスが返ってきた時 3) $locationで遷移が行われる時 4) $timeoutで指定秒が経った時
28.
$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
29.
API Callはなるべく1本に ・当たり前といえば当たり前だが…
・$http, $resourceでデータをfetchした時にdigest loop が走るため、画面構築時に何本もAPIを呼ぶとdigest loop が多く走ってしまう
30.
まとめ ・Angularの2way data
bindingはPureなJS Objectが ViewModelになります ・PureなJS Objectに変化があったか否かは現状のjsの仕様では 検知できないので、無理やり前後比較をします(Dirty Checking) ・watch対象が増えるとdigest loopにかかる時間が増えて重く なります ・digest loopにかかる時間と、発生頻度を減らす事が高速化の 基本方針です
Download Now