Download as PDF, PPTX
More Related Content
Similar to HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
![HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]](https://cdn.slidesharecdn.com/ss_thumbnails/html5etc005s2-130606051334-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
- 1. HTML5など 勉強会 Vol. 11 HighPerformance Web and iOS 6 WebKit 2012/7/6 @ 某社 Technical Ability Development Group (a.k.a TAD) George Harada
- 2.
- 3. Agenda 1. iOS 6WebKit 2. High Performance Web
- 4. Agenda 1. iOS 6WebKit 2. High Performance Web
- 5.
- 6. Web Audio API 音声を【とても高度に】扱えるようになる 用途の例 ・ゲームの効果音 ・オーディオシーケンサー ・オーディオ編集 Audio要素<< Audio Data API <<<<< Web Audio API http://www.html5rocks.com/en/tutorials/webaudio/intro/
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. Agenda 1. iOS 6WebKit 2. High Performance Web
- 14.
- 15.
- 16. HTTPリクエストを減らす ルール1 ★ ★ ★ ★ ★
- 17.
- 18. <link rel="stylesheet" href="style_a.css"> <linkrel="stylesheet" href="style_b.css"> <link rel="stylesheet" href="style_c.css"> <script src="javascript_a.js"></script> <script src="javascript_b.js"></script> CSS/JSファイルをそれぞれ結合する <link rel="stylesheet" href="style_abc.css"> <script src="javascript_ab.js"></script> ルール1. HTTPリクエストを減らす CSS/JSファイルを結合 ・結合すべきファイルか ・インライン化すべきか DEMO: r1-1
- 19.
- 20. ■data URI scheme 画像を文字列に変換して、HTMLやCSSに埋め込む <imgsrc="logo.png" alt="My logo"> Base64エンコード (サイズが約1.3倍になる) <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAAA3NCSVQICAjb4U/gAAADi0lEQVQ4jW2UT2hcVRTGv/ vmzbxJ5k0zSbRqMS2NJYaaolQtFKmKUqpt7MZiFroQRV0JIqJStGjAv0UoLgRBEbopQU0rdlEXioqltraJhBb/LKSpQjRNO2SMmT/v3ftzMW+SmUkOb/ HuOfd8nPOd7x4DqNVAxkhStaogkCRrNX1R1Zpyodb3aeV9SaYNaAklipROa/KMPvlIX53QfEmVRaVDbR7UXXcrZRTHujyn/aPq71McS7SaczhHtQbw3ut0ekhsvZ2Jnzl6mNBHWv62bee/ MlEN62gFcgC1GsBbLyCRT9HXx8yVJL53B2mfnixDWzg7SXEewFqgFcg5qlWc4+tjSKwNkXjxVYCrV6lWefg +JLpEOsWvfwJJ7c7hNRNkJOPJGH3wvjo65KMwq0dGBMqFymRUqSjIKNepTFqleTknYxq0NlcURQDTv5BpsLDxJioxcQ1g9hJhw997DXMlnCO2Sa7fVhHIBHrmaXmBKlUN3aogpdgpijRX1GNPqjOnyGnLVvXm ZWN5DYCW8SOZdpUojmStguwq8lnuqx0IOSeDRvfrj3+UT6trnd4claRvT2jsMy0sqKNLr7ym63uV8uWZBKWe3GK1GtYyfhjToGPPA+wbTv4HBjh2HOuwFudaElcXJDA3w+jLBGLdtey6nwMHOHlq +c5K81e2HdWUSqtS1g/fqX+zzl/QkkZsLId8v/G+TEtyi9UVcP40G65DYmATY58z83cjWiOKWwpfvTVrsZbfptjQQ0r0ZvCExKZ +nnue02eXeUx6bANawi7NYy0fH0QeN4Ss8enJUPDxhURg2D3MN98DxHF7UaofnKUWJa4vPyXfGJknCj69Ad0Z8l7ifOMgDqLaahXV4Y4eYdcOJIZu4fhx3h1laCBJDg2h6M6QE9k0v1/ CuYSvBMha4phSkZGHkpw7t/PXbIOOMuNj7N1JWqRFh1hjCAPOXIDG00+AymWAt19CYn0BeRz5AqBYpFSiHgUmT3Jjge4svrh5kH/LxHGyierm1V9XJiNJi1WFaR16Rz+eU6GgfF7ZbLJ2564Iq2JF2S4d +lBhVs7Ja15C9dbKCzz7BEHTGr1tiEdHeOpx9g2zcW3i3L2HialluTVPzQA4ycgYTZ3T+LgmftL0RV2e1eKiPF9hXoNDuude7XxQ2+6QpDhOxN2sbOMcxginKE4alFStqlyRcwoC5TpbVorMKiiS/ geLi64vIQRRqgAAAABJRU5ErkJggg== " alt="My logo"> ルール1. HTTPリクエストを減らす 画像のインライン化 ・インライン化に適したサイズか ・キャッシュを利用できるか DEMO: r1-4
- 21.
- 22. キャッシュの有効期限が来るまで ブラウザからリクエストを発生させない ■Apache: mod_expires(http://httpd.apache.org/docs/2.2/ja/mod/mod_expires.html) <FilesMatch ".(gif|jpg|png|js|css)$"> ExpiresDefault"access plus 1 years" </FilesMatch> ■PHP: header関数 header('Content-Type: application/x-javascript'); header('Expires: ' . gmdate('D, d M Y H:i:s T', strtotime('+1 year'))); ・キャッシュすべきファイルか ・ページ参照回数が多いサービスか ルール2. HTTPレスポンスをキャッシュさせる Expiresヘッダ DEMO: r2-1
- 23. キャッシュを簡単かつ高度に制御する http://www.html5rocks.com/ja/tutorials/appcache/beginner/ ルール2. HTTPレスポンスをキャッシュさせる ApplicationCache CACHE MANIFEST #comment CACHE: index.html style.css js/script.js logo.png NETWORK: login.php /api FALLBACK: images/large/ images/offline.png <!DOCTYPE html> <html manifest="example.appcache"> <head> <meta charset="UTF-8"> <title>Offline Application</title> <link rel="stylesheet" href="style.css"> <script src="js/script.js"></script> </head> <body> <img src="logo.png"> <a href="login.php">Login</a> </body> </html> example.appcache index.html DEMO: r2-2
- 24. ルール2. HTTPレスポンスをキャッシュさせる ApplicationCache ■容量 5MB まで(iOS 6 からは 25MB まで) ■MIMEタイプ AddType text/cache-manifest .appcache ■キャッシュが更新されるタイミング 1. ユーザーがブラウザのデータをクリアした時 2. マニフェストファイルが更新された時 3. プログラムで更新命令を実行した時 (JavaScript) ※マニフェストに書いたキャッシュ対象ファイルを更新しても、再読込みされない ※マニフェストファイルの比較はバイト単位で行なわれる （ファイルの更新日時だけではNG） ・キャッシュすべきファイルか ・非対応ブラウザへの配慮はあるか DEMO: r2-2
- 25. <style> body { background-color:#000; } </style> <link rel="stylesheet" href="style.css"> ------------------------------------------ <script> window.onload = alert('Hello World!'); </script> <script src="javascript.js"></script> ルール2. HTTPレスポンスをキャッシュさせる CSS/JSを外部ファイル化 ・サーバのキャッシュ設定は適切か ・インライン化すべきか
- 26.
- 27. HTML, CSS, JavaScriptは、サイズを 約70%減量することができる ■Apacheモジュールで動的に圧縮する mod_deflate(2.x), mod_gzip (1.3) デメリット： ファイルの管理が楽 デメリット： サーバに負荷が掛かる (圧縮処理) ■あらかじめ圧縮したファイルを用意しておく mod_rewriteで、圧縮したファイルが存在すればそちらを返すようにする デメリット： サーバに負荷が掛からない デメリット： ファイルの管理が面倒 （更新時に圧縮ファイル作成） ・画像やPDFは圧縮しない ルール3. HTTPレスポンスに必要な時間を短縮する ファイルのgzip圧縮
- 28. コードの実行に不要な文字を除去して ファイルサイズを削減する ■縮小化(minification) コメント、不要な空白文字(スペース、改行、タブ)を削除する ■難読化(obfuscation) 縮小化に加えて、コードそのものも改変する 一般的には、関数名や変数名が短い文字列に変換される デメリット： 縮小化よりもさらにファイルサイズが小さくなる デメリット： バグが混入する可能性がある・保守性を考慮する ・難読化はリスクを伴う ルール3. HTTPレスポンスに必要な時間を短縮する JavaScriptの縮小化 DEMO: r3-2
- 29.
- 30. 速く動くようにみせる ルール4 ★ ★ ★ ★ ★
- 31. HTMLのなるべく後方で読込む ・<script>要素の外部スクリプトは同期的に読込まれ、後ろのコンテンツをブロックする ・既存のファイルにこのルールを適用する場合は、最後に置いても問題ないか確認する ルール4. 速く動くようにみせる Scriptは最後に置く <!DOCTYPE html> <html> <head> <metacharset="UTF-8"> <title>Script top</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <img src="logo.png" alt="My logo"> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Script bottom</title> <link rel="stylesheet" href="style.css"> </head> <body> <img src="logo.png" alt="My logo"> <script src="script.js"></script> </body> </html> js-top.html js-bottom.html DEMO: r4-1
- 32. async属性を指定する (HTML5で追加) ・外部スクリプトを非同期で読込み、そのスクリプトが実行可能になったらすぐに実行する ・非対応ブラウザへの配慮が必要 (defer属性のみ動くブラウザもある) ルール4.速く動くようにみせる Scriptを非同期で読込み <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Script top</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <img src="logo.png" alt="My logo"> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Script bottom</title> <link rel="stylesheet" href="style.css"> <script src="script.js" async></script> </head> <body> <img src="logo.png" alt="My logo"> </body> </html> js-top.html js-async.html DEMO: r4-2
- 33.
- 34.
- 35.
- 36.
- 37.
- 38. 参考文献等 Performance tuning - http://stevesouders.com/hpws/ -http://www.amazon.co.jp/ハイパフォーマンスWebサイト-―高速サイトを実現する14のルール-Steve- Souders/dp/487311361X HTML5 - http://html5.jp/ - http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291 Web Audio API - http://www.html5rocks.com/en/tutorials/webaudio/intro/ ApplicationCache - http://www.html5rocks.com/ja/tutorials/appcache/beginner/