html5など社内勉強会 vol.11 - high performance web and ios 6 webkit
DESCRIPTION
TRANSCRIPT
HTML5など 勉強会 Vol. 11 High Performance Web and iOS 6 WebKit
2012/7/6 @ 某社Technical Ability Development Group (a.k.a TAD)
George Harada
提 供
勉強会スタッフ（ボランティア）
技術能力開発G
Agenda
1. iOS 6 WebKit
2. High Performance Web
Agenda
1. iOS 6 WebKit
2. High Performance Web
注目のWeb新機能を2つ抜粋して紹介
Web Audio API音声を【とても高度に】扱えるようになる
用途の例・ゲームの効果音・オーディオシーケンサー・オーディオ編集
Audio要素 << Audio Data API <<<<< Web Audio API
http://www.html5rocks.com/en/tutorials/webaudio/intro/
Upload images動画／写真をWebブラウザからサーバへ送信できるようになる
用途の例・動画／写真の投稿共有サイト・カスタマーセンター業務（エラー画面のスクリーンショットを送信）
DEMO Codegithub.com/georz/
html5etc_011
新しいサービスをイロイロと考えてみてください！！
One more thing...
Remote Debugging
DEMO
Agenda
1. iOS 6 WebKit
2. 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.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
■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
■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
HTTPレスポンスをキャッシュさせる
ルール2
★ ★ ★ ★ ★
キャッシュの有効期限が来るまでブラウザからリクエストを発生させない■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
キャッシュを簡単かつ高度に制御する
http://www.html5rocks.com/ja/tutorials/appcache/beginner/
ルール2. HTTPレスポンスをキャッシュさせる
ApplicationCache
CACHE MANIFEST# comment
CACHE:index.htmlstyle.cssjs/script.jslogo.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
ルール2. HTTPレスポンスをキャッシュさせる
ApplicationCache■容量5MB まで (iOS 6 からは 25MB まで)
■MIMEタイプAddType text/cache-manifest .appcache
■キャッシュが更新されるタイミング1. ユーザーがブラウザのデータをクリアした時2. マニフェストファイルが更新された時3. プログラムで更新命令を実行した時 (JavaScript)
※マニフェストに書いたキャッシュ対象ファイルを更新しても、再読込みされない※マニフェストファイルの比較はバイト単位で行なわれる （ファイルの更新日時だけではNG）
・キャッシュすべきファイルか・非対応ブラウザへの配慮はあるか
DEMO: r2-2
<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を外部ファイル化
・サーバのキャッシュ設定は適切か・インライン化すべきか
HTTPレスポンスに必要な時間を短縮する
ルール3
★ ★ ★ ★
HTML, CSS, JavaScriptは、サイズを約70%減量することができる■Apacheモジュールで動的に圧縮するmod_deflate (2.x), mod_gzip (1.3)
デメリット： ファイルの管理が楽デメリット： サーバに負荷が掛かる (圧縮処理)
■あらかじめ圧縮したファイルを用意しておくmod_rewriteで、圧縮したファイルが存在すればそちらを返すようにする
デメリット： サーバに負荷が掛からないデメリット： ファイルの管理が面倒 （更新時に圧縮ファイル作成） ・画像やPDFは圧縮しない
ルール3. HTTPレスポンスに必要な時間を短縮する
ファイルのgzip圧縮
コードの実行に不要な文字を除去してファイルサイズを削減する■縮小化 (minification)
コメント、不要な空白文字(スペース、改行、タブ)を削除する
■難読化 (obfuscation)
縮小化に加えて、コードそのものも改変する一般的には、関数名や変数名が短い文字列に変換される
デメリット： 縮小化よりもさらにファイルサイズが小さくなるデメリット： バグが混入する可能性がある ・保守性を考慮する
・難読化はリスクを伴う
ルール3. HTTPレスポンスに必要な時間を短縮する
JavaScriptの縮小化DEMO: r3-2
ルール3. HTTPレスポンスに必要な時間を短縮する
Keep-Aliveを有効にする
速く動くようにみせる
ルール4
★ ★ ★ ★ ★
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.html
DEMO: r4-1
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
これですべてのコンテンツ終了
如何でしたか？
勉強会スタッフ絶賛募集中です
また次回お会いしましょう
tthhaannkkss !!
参考文献等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/