Weitere ähnliche Inhalte
Ähnlich wie HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
Ähnlich wie HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit (20)
Mehr von George Harada (12)
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
- 1. HTML5など
勉強会 Vol. 11
High Performance Web
and iOS 6 WebKit
2012/7/6 @ 某社
Technical Ability Development Group (a.k.a TAD)
George Harada
- 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
- 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
+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
- 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を外部ファイル化
・サーバのキャッシュ設定は適切か
・インライン化すべきか
- 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
- 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/
