スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
- 2. 2 自己紹介 • 児玉 映治 • 株式会社gloops UI/UXグループマネージャー 兼WEBデザイングループマネージャー • 元々サーバサイドのエンジニア
- 3. 3 弊社紹介 • 株式会社gloops • 事業内容:ソーシャルアプリケーション事業 • 累計ユーザー数1800万人 • 主なタイトル
- 4. 4 アジェンダ 1. フロントエンド高速化の基本 ① ページサイズとHTTPリクエストの軽減 ② ソースコードの最適化 2. ユーザーの体感速度 ① レンダリング ② イベント
- 11. 11 ・HTTPリクエストを一気に減らせる CSSスプライトの特徴 ・画像の表示は遅い ⇒CSSの解釈が終わってから画像を取りに行くため ・画像を用意する人とCSSを作る人が別々の場合 運用が少々面倒
- 13. 13 CSSスプライト ・更新頻度が少ない ・一つの画面で1回くらいしか使わない それぞれどう使い分ける？ DataURIスキーム ・更新頻度が少ない ・一つの画面で何度も使う ・色数やサイズが小さい
- 14. 14 ・ページサイズは何kb？ HTTPリクエストは何回？ どの程度まで軽減するべきか？ ・1秒以内を目指す ⇒2秒を超えると人は遅いと感じる ・速ければ速い程良い ・あとはデザインのクオリティと相談
- 15. 15 ページサイズを軽くした結果 ページサイズ HTTPリクエスト 時間 1120kb 50 1238.36ms 725kb 50 1036.88ms 508kb 50 910.67ms 308kb 50 689.29ms あるアプリでのLoadイベントまでの時間 ※iPhone4S(ios6.1) 3G回線を使用
- 16. 16 HTTPリクエストを減らした結果 ページサイズ HTTPリクエスト 時間 447kb 80 1006.86ms 436kb 50 939.71ms 442kb 35 662.50ms
- 17. 17 ページサイズ HTTPリクエスト 時間 447kb 80 1006.86ms 436kb 50 939.71ms 442kb 35 662.50ms
- 18. 18 あるアプリBで、2倍以上の差が発生 ページサイズ HTTPリクエスト 時間 アプリA 508kb 57 910.67ms アプリA 442kb 35 662.50ms アプリB 517kb 33 2091.90ms 減らすだけでは不十分
- 22. 22 計ってみた iPhone4 iPhone5 Galaxy Nexus div > div > div > div.hoge 432ms 203ms 605ms .hoge 405ms 201ms 595ms 1000回実行してみると
- 28. 28 変数を利用する ・DOM, 関数, style, length etc… 複数回使うなら変数の中に入れてそっちを使う ・必ずvarで宣言してローカル変数にする ・基本中の基本 ・だけど見落としやすい
- 34. 34 jQueryの最適化 ・jQueryオブジェクトの生成 ○ × 速いのはどっち？ ※ただしgetElementsByClassNameが実装されていないブラウザの場合はBが速い スマホの場合はA
- 35. 35 jQueryのセレクタの仕組み ① 初めにgetElementBy系が使われる （getElementById, getElementsByClassName, getElementsByTagName） ② ①で取れない場合はquerySelectorAllが使われる ③ ②でもダメならsizzleエンジンが使われる
- 36. 36 jQueryのセレクタの仕組み ① 初めにgetElementBy系が使われる （getElementById, getElementsByClassName, getElementsByTagName） ② ①で取れない場合はquerySelectorAllが使われる ③ ②でもダメならsizzleエンジンが使われる
- 39. 39 2. ユーザーの体感速度
- 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の階層が深くなりやすい
- 46. 46 タップ時のイベントの種類 ・スマホでのタップ関連のイベントは主に次の6つがある mousedown, mousemove, mouseup touchstart, touchmove, touchend
- 50. 50 3. さいごに