Downloaded 54 times
More Related Content
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
- 1.
- 2. 2 自己紹介 • 児玉 映治 •株式会社gloops UI/UXグループマネージャー 兼WEBデザイングループマネージャー • 元々サーバサイドのエンジニア
- 3. 3 弊社紹介 • 株式会社gloops • 事業内容:ソーシャルアプリケーション事業 •累計ユーザー数1800万人 • 主なタイトル
- 4. 4 アジェンダ 1. フロントエンド高速化の基本 ① ページサイズとHTTPリクエストの軽減 ②ソースコードの最適化 2. ユーザーの体感速度 ① レンダリング ② イベント
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. 15 ページサイズを軽くした結果 ページサイズ HTTPリクエスト 時間 1120kb50 1238.36ms 725kb 50 1036.88ms 508kb 50 910.67ms 308kb 50 689.29ms あるアプリでのLoadイベントまでの時間 ※iPhone4S(ios6.1) 3G回線を使用
- 16. 16 HTTPリクエストを減らした結果 ページサイズ HTTPリクエスト 時間 447kb80 1006.86ms 436kb 50 939.71ms 442kb 35 662.50ms
- 17. 17 ページサイズ HTTPリクエスト 時間 447kb80 1006.86ms 436kb 50 939.71ms 442kb 35 662.50ms
- 18. 18 あるアプリBで、2倍以上の差が発生 ページサイズ HTTPリクエスト 時間 アプリA508kb 57 910.67ms アプリA 442kb 35 662.50ms アプリB 517kb 33 2091.90ms 減らすだけでは不十分
- 19.
- 20.
- 21.
- 22. 22 計ってみた iPhone4 iPhone5 GalaxyNexus div > div > div > div.hoge 432ms 203ms 605ms .hoge 405ms 201ms 595ms 1000回実行してみると
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. 28 変数を利用する ・DOM, 関数, style,length etc… 複数回使うなら変数の中に入れてそっちを使う ・必ずvarで宣言してローカル変数にする ・基本中の基本 ・だけど見落としやすい
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35. 35 jQueryのセレクタの仕組み ① 初めにgetElementBy系が使われる （getElementById, getElementsByClassName,getElementsByTagName） ② ①で取れない場合はquerySelectorAllが使われる ③ ②でもダメならsizzleエンジンが使われる
- 36. 36 jQueryのセレクタの仕組み ① 初めにgetElementBy系が使われる （getElementById, getElementsByClassName,getElementsByTagName） ② ①で取れない場合はquerySelectorAllが使われる ③ ②でもダメならsizzleエンジンが使われる
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44. 44 <a href=“#” style=“position:absolute;width:20px; height:20px; overflow:hidden; display:block;”> <img src=“sprite.png” width=“100” height=“200” alt=“hoge” style=“position:absolute; top:50px; left:0px;” /> </a> スプライト画像を使う ・img要素でもスプライト画像は使える ※但しHTMLの階層が深くなりやすい
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.