Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5など勉強会 Vol. 11High Performance Weband iOS 6 WebKit2012/7/6 @ 某社Technical Ability Development Group (a.k.a TAD)George H...
提 供勉強会スタッフ(ボランティア)技術能力開発G
Agenda1. iOS 6 WebKit2. High Performance Web
Agenda1. iOS 6 WebKit2. High Performance Web
注目のWeb新機能を2つ抜粋して紹介
Web Audio API音声を【とても高度に】扱えるようになる用途の例・ゲームの効果音・オーディオシーケンサー・オーディオ編集Audio要素 << Audio Data API <<<<< Web Audio APIhttp://www.ht...
Upload images動画/写真をWebブラウザからサーバへ送信できるようになる用途の例・動画/写真の投稿共有サイト・カスタマーセンター業務(エラー画面のスクリーンショットを送信)
DEMO Codegithub.com/georz/html5etc_011
新しいサービスをイロイロと考えてみてください!!
One more thing...
Remote Debugging
DEMO
Agenda1. iOS 6 WebKit2. High Performance Web
DEMO Codegithub.com/georz/html5etc_011
この先、DEMOがある場合はスライドの右上にCodeのディレクトリを記載
HTTPリクエストを減らすルール1★  ★  ★  ★  ★
HTTPリクエストHTTPレスポンスWebサーバクライアント(ブラウザ) そのまえに・・・ HTTPのおさらい・リクエストとレスポンスは必ずセット・リクエストは常にクライアントから
<link rel="stylesheet" href="style_a.css"><link rel="stylesheet" href="style_b.css"><link rel="stylesheet" href="style_c.c...
■CSSスプライト複数の画像をまとめて1枚にし、CSSで切り出して使うhttp://www.google.com/pacman/■イメージマップ1枚の画像に、エリアを指定してハイパーリンクを設定可能http://stevesouders.com...
■data URI scheme画像を文字列に変換して、HTMLやCSSに埋め込む<img src="logo.png" alt="My logo">          Base64エンコード (サイズが約1.3倍になる)<img src="d...
HTTPレスポンスをキャッシュさせるルール2★  ★  ★  ★  ★
キャッシュの有効期限が来るまでブラウザからリクエストを発生させない■Apache: mod_expires(http://httpd.apache.org/docs/2.2/ja/mod/mod_expires.html)<FilesMatch...
キャッシュを簡単かつ高度に制御するhttp://www.html5rocks.com/ja/tutorials/appcache/beginner/ ルール2. HTTPレスポンスをキャッシュさせる ApplicationCacheCACHE ...
 ルール2. HTTPレスポンスをキャッシュさせる ApplicationCache■容量5MB まで (iOS 6 からは 25MB まで)■MIMEタイプAddType text/cache-manifest .appcache■キャッシュ...
<style>body { background-color: #000; }</style><link rel="stylesheet" href="style.css">-----------------------------------...
HTTPレスポンスに必要な時間を短縮するルール3★  ★  ★  ★
HTML, CSS, JavaScriptは、サイズを約70%減量することができる■Apacheモジュールで動的に圧縮するmod_deflate (2.x), mod_gzip (1.3)デメリット: ファイルの管理が楽デメリット: サーバに負...
コードの実行に不要な文字を除去してファイルサイズを削減する■縮小化(minification)コメント、不要な空白文字(スペース、改行、タブ)を削除する■難読化(obfuscation)縮小化に加えて、コードそのものも改変する一般的には、関数名...
 ルール3. HTTPレスポンスに必要な時間を短縮する Keep-Aliveを有効にする
速く動くようにみせるルール4★  ★  ★  ★  ★
HTMLのなるべく後方で読込む・<script>要素の外部スクリプトは同期的に読込まれ、後ろのコンテンツをブロックする・既存のファイルにこのルールを適用する場合は、最後に置いても問題ないか確認する ルール4. 速く動くようにみせる Script...
async属性を指定する (HTML5で追加)・外部スクリプトを非同期で読込み、そのスクリプトが実行可能になったらすぐに実行する・非対応ブラウザへの配慮が必要 (defer属性のみ動くブラウザもある) ルール4. 速く動くようにみせる Scri...
これですべてのコンテンツ終了
如何でしたか?
勉強会スタッフ絶賛募集中です
また次回お会いしましょう
tthhaannkkss  !!
参考文献等Performance tuning- http://stevesouders.com/hpws/- http://www.amazon.co.jp/ハイパフォーマンスWebサイト-―高速サイトを実現する14のルール-Steve-So...
Upcoming SlideShare
Loading in …5
×

HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit

535 views

Published on

Published in: Education
  • Be the first to comment

HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit

  1. 1. HTML5など勉強会 Vol. 11High Performance Weband iOS 6 WebKit2012/7/6 @ 某社Technical Ability Development Group (a.k.a TAD)George Harada
  2. 2. 提 供勉強会スタッフ(ボランティア)技術能力開発G
  3. 3. Agenda1. iOS 6 WebKit2. High Performance Web
  4. 4. Agenda1. iOS 6 WebKit2. High Performance Web
  5. 5. 注目のWeb新機能を2つ抜粋して紹介
  6. 6. Web Audio API音声を【とても高度に】扱えるようになる用途の例・ゲームの効果音・オーディオシーケンサー・オーディオ編集Audio要素 << Audio Data API <<<<< Web Audio APIhttp://www.html5rocks.com/en/tutorials/webaudio/intro/
  7. 7. Upload images動画/写真をWebブラウザからサーバへ送信できるようになる用途の例・動画/写真の投稿共有サイト・カスタマーセンター業務(エラー画面のスクリーンショットを送信)
  8. 8. DEMO Codegithub.com/georz/html5etc_011
  9. 9. 新しいサービスをイロイロと考えてみてください!!
  10. 10. One more thing...
  11. 11. Remote Debugging
  12. 12. DEMO
  13. 13. Agenda1. iOS 6 WebKit2. High Performance Web
  14. 14. DEMO Codegithub.com/georz/html5etc_011
  15. 15. この先、DEMOがある場合はスライドの右上にCodeのディレクトリを記載
  16. 16. HTTPリクエストを減らすルール1★ ★ ★ ★ ★
  17. 17. HTTPリクエストHTTPレスポンスWebサーバクライアント(ブラウザ) そのまえに・・・ HTTPのおさらい・リクエストとレスポンスは必ずセット・リクエストは常にクライアントから
  18. 18. <link rel="stylesheet" href="style_a.css"><link rel="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. 19. ■CSSスプライト複数の画像をまとめて1枚にし、CSSで切り出して使うhttp://www.google.com/pacman/■イメージマップ1枚の画像に、エリアを指定してハイパーリンクを設定可能http://stevesouders.com/hpws/imagemap-no.phphttp://stevesouders.com/hpws/imagemap.php ルール1. HTTPリクエストを減らす 画像ファイルを結合・本当に画像が必要か・インライン化すべきかDEMO: r1-2DEMO: r1-3
  20. 20. ■data URI scheme画像を文字列に変換して、HTMLやCSSに埋め込む<img src="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+JLpEOsWvfwJJ7c7hNRNkJOPJGH3wvjo65KMwq0dGBMqFymRUqSjIKNepTFqleTknYxq0NlcURQDTv5BpsLDxJioxcQ1g9hJhw997DXMlnCO2Sa7fVhHIBHrmaXmBKlUN3aogpdgpijRX1GNPqjOnyGnLVvXmZWN5DYCW8SOZdpUojmStguwq8lnuqx0IOSeDRvfrj3+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. 21. HTTPレスポンスをキャッシュさせるルール2★ ★ ★ ★ ★
  22. 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. 23. キャッシュを簡単かつ高度に制御するhttp://www.html5rocks.com/ja/tutorials/appcache/beginner/ ルール2. HTTPレスポンスをキャッシュさせる ApplicationCacheCACHE MANIFEST# commentCACHE:index.htmlstyle.cssjs/script.jslogo.pngNETWORK:login.php/apiFALLBACK: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.htmlDEMO: r2-2
  24. 24.  ルール2. HTTPレスポンスをキャッシュさせる ApplicationCache■容量5MB まで (iOS 6 からは 25MB まで)■MIMEタイプAddType text/cache-manifest .appcache■キャッシュが更新されるタイミング1. ユーザーがブラウザのデータをクリアした時2. マニフェストファイルが更新された時3. プログラムで更新命令を実行した時 (JavaScript)※マニフェストに書いたキャッシュ対象ファイルを更新しても、再読込みされない※マニフェストファイルの比較はバイト単位で行なわれる (ファイルの更新日時だけではNG)・キャッシュすべきファイルか・非対応ブラウザへの配慮はあるかDEMO: r2-2
  25. 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. 26. HTTPレスポンスに必要な時間を短縮するルール3★ ★ ★ ★
  27. 27. HTML, CSS, JavaScriptは、サイズを約70%減量することができる■Apacheモジュールで動的に圧縮するmod_deflate (2.x), mod_gzip (1.3)デメリット: ファイルの管理が楽デメリット: サーバに負荷が掛かる (圧縮処理)■あらかじめ圧縮したファイルを用意しておくmod_rewriteで、圧縮したファイルが存在すればそちらを返すようにするデメリット: サーバに負荷が掛からないデメリット: ファイルの管理が面倒 (更新時に圧縮ファイル作成)・画像やPDFは圧縮しない ルール3. HTTPレスポンスに必要な時間を短縮する ファイルのgzip圧縮
  28. 28. コードの実行に不要な文字を除去してファイルサイズを削減する■縮小化(minification)コメント、不要な空白文字(スペース、改行、タブ)を削除する■難読化(obfuscation)縮小化に加えて、コードそのものも改変する一般的には、関数名や変数名が短い文字列に変換されるデメリット: 縮小化よりもさらにファイルサイズが小さくなるデメリット: バグが混入する可能性がある ・保守性を考慮する・難読化はリスクを伴う ルール3. HTTPレスポンスに必要な時間を短縮する JavaScriptの縮小化DEMO: r3-2
  29. 29.  ルール3. HTTPレスポンスに必要な時間を短縮する Keep-Aliveを有効にする
  30. 30. 速く動くようにみせるルール4★ ★ ★ ★ ★
  31. 31. HTMLのなるべく後方で読込む・<script>要素の外部スクリプトは同期的に読込まれ、後ろのコンテンツをブロックする・既存のファイルにこのルールを適用する場合は、最後に置いても問題ないか確認する ルール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"></head><body><img src="logo.png" alt="My logo"><script src="script.js"></script></body></html>js-top.html js-bottom.htmlDEMO: r4-1
  32. 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.htmlDEMO: r4-2
  33. 33. これですべてのコンテンツ終了
  34. 34. 如何でしたか?
  35. 35. 勉強会スタッフ絶賛募集中です
  36. 36. また次回お会いしましょう
  37. 37. tthhaannkkss !!
  38. 38. 参考文献等Performance tuning- http://stevesouders.com/hpws/- http://www.amazon.co.jp/ハイパフォーマンスWebサイト-―高速サイトを実現する14のルール-Steve-Souders/dp/487311361XHTML5- http://html5.jp/- http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291Web Audio API- http://www.html5rocks.com/en/tutorials/webaudio/intro/ApplicationCache- http://www.html5rocks.com/ja/tutorials/appcache/beginner/

×