狠狠撸

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

注目のWeb新機能を
2つ抜粋して紹介

Web Audio API
音声を【とても高度に】扱えるようになる
用途の例
?ゲームの効果音
?オーディオシーケンサー
?オーディオ編集
Audio要素 << Audio Data API <<<<< Web Audio API
http://www.html5rocks.com/en/tutorials/webaudio/intro/

Upload images
動画／写真をWebブラウザから
サーバへ送信できるようになる
用途の例
?動画／写真の投稿共有サイト
?カスタマーセンター業務（エラー画面のスクリーンショットを送信）

DEMO Code
github.com/georz/
html5etc_011

新しいサービスを
イロイロと考えて
みてください！！

この先、DEMOがある場合は
スライドの右上に
Codeのディレクトリを記載

HTTPリクエストを減らす
ルール1
★ ★ ★ ★ ★

HTTPリクエスト
HTTPレスポンス
Webサーバ
クライアント
（ブラウザ）
?そのまえに???
?HTTPのおさらい
?リクエストとレスポンスは必ずセット
?リクエストは常にクライアントから

■CSSスプライト
複数の画像をまとめて1枚にし、CSSで切り出して使う
http://www.google.com/pacman/
■イメージマップ
1枚の画像に、エリアを指定してハイパーリンクを設定可能
http://stevesouders.com/hpws/imagemap-no.php
http://stevesouders.com/hpws/imagemap.php
?画像ファイルを結合
?本当に画像が必要か
DEMO: r1-2
DEMO: r1-3

■data URI scheme
画像を文字列に変換して、HTMLやCSSに埋め込む
<img src=/slideshow/html5etc-011/22541036/"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">
?画像のインライン化
?インライン化に適したサイズか
?キャッシュを利用できるか
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/
?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=/slideshow/html5etc-011/22541036/"js/script.js"></script>
</head>
<body>
<img src=/slideshow/html5etc-011/22541036/"logo.png">
<a href="login.php">Login</a>
</body>
</html>
example.appcache index.html
DEMO: r2-2

?ApplicationCache
■容量
5MB まで (iOS 6 からは 25MB まで)
■MIMEタイプ
AddType text/cache-manifest .appcache
■キャッシュが更新されるタイミング
1. ユーザーがブラウザのデータをクリアした時
2. マニフェストファイルが更新された時
3. プログラムで更新命令を実行した時 (JavaScript)
※マニフェストに書いたキャッシュ対象ファイルを更新しても、再読込みされない
※マニフェストファイルの比較はバイト単位で行なわれる（ファイルの更新日時だけではNG）
?キャッシュすべきファイルか
?非対応ブラウザへの配慮はあるか
DEMO: r2-2

HTTPレスポンスに
必要な時間を短縮する
ルール3
★ ★ ★ ★

HTML, CSS, JavaScriptは、サイズを
約70%減量することができる
■Apacheモジュールで動的に圧縮する
mod_deflate (2.x), mod_gzip (1.3)
デメリット：ファイルの管理が楽
デメリット：サーバに負荷が掛かる (圧縮処理)
■あらかじめ圧縮したファイルを用意しておく
mod_rewriteで、圧縮したファイルが存在すればそちらを返すようにする
デメリット：サーバに負荷が掛からない
デメリット：ファイルの管理が面倒（更新時に圧縮ファイル作成）
?画像やPDFは圧縮しない
?ルール3. HTTPレスポンスに必要な時間を短縮する
?ファイルのgzip圧縮

コードの実行に不要な文字を除去して
ファイルサイズを削減する
■縮小化(minification)
コメント、不要な空白文字(スペース、改行、タブ)を削除する
■難読化(obfuscation)
縮小化に加えて、コードそのものも改変する
一般的には、関数名や変数名が短い文字列に変換される
デメリット：縮小化よりもさらにファイルサイズが小さくなる
デメリット：バグが混入する可能性がある ?保守性を考慮する
?難読化はリスクを伴う
?JavaScriptの縮小化
DEMO: r3-2

?Keep-Aliveを有効にする

速く動くようにみせる
ルール4
★ ★ ★ ★ ★

HTMLのなるべく後方で読込む
?<script>要素の外部スクリプトは同期的に読込まれ、後ろのコンテンツをブロックする
?既存のファイルにこのルールを適用する場合は、最後に置いても問題ないか確認する
?ルール4. 速く動くようにみせる
?Scriptは最後に置く
<!DOCTYPE html>
<html>
<head>
<title>Script top</title>
<script src=/slideshow/html5etc-011/22541036/"script.js"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Script bottom</title>
</head>
<body>
</body>
</html>
js-top.html js-bottom.html
DEMO: r4-1

async属性を指定する (HTML5で追加)
?外部スクリプトを非同期で読込み、そのスクリプトが実行可能になったらすぐに実行する
?非対応ブラウザへの配慮が必要 (defer属性のみ動くブラウザもある)
?ルール4. 速く動くようにみせる
?Scriptを非同期で読込み
<!DOCTYPE html>
<html>
<head>
<title>Script top</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Script bottom</title>
<script src="script.js" async></script>
</head>
<body>
</body>
</html>
js-top.html js-async.html
DEMO: r4-2

これですべての
コンテンツ終了

勉強会スタッフ
絶賛募集中です

また次回
お会いしましょう

参考文献等
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/

狠狠撸

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

Recommended

More Related Content

What's hot (16)

Similar to HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit (20)

More from George Harada (12)

Recently uploaded (7)

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