Weitere ähnliche Inhalte
Ähnlich wie 5分で詰め込む フロントエンド最適化 (20)
Kürzlich hochgeladen (11)
5分で詰め込む フロントエンド最適化
- 14. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
例えば・・
<!DOCTYPE html>
<script></script>
<link rel="stylesheet" href="style.css">
- 16. <html>,</html>,<head>,</head>,<body>,
</body>,</li>,</dt>,</dd>,</p>,</option>,
</thead>,<tbody>,</tr>,</td>,</th> などなど。。
結構いっぱい省略できる
- 19. class AppHelper extends Helper {
public function afterLayout($layoutFile) {
parent::afterLayout($layoutFile);
if($this->_View) {
//出力するソースのタブ・スペース・改行を削除する
$this->_View->output =
str_replace(array("¥n", "¥t", ' '), '', $this->_View->output);
}
}
}
CakePHPの場合
Hinweis der Redaktion
- 結局これなんですよね。
案件や環境に依存してしまう。あとお金!
そもそも実際に動いてるサイトに対してサーバとかを触ってしまうのはリスクが大きいですよね。
- ハイパフォーマンスWebサイというオライリーの本にも書いてあります。
Webでの待ち時間の8割がフロントエンドに費やされているという話があります。
- 勘違いされがちなのですが、実はHTML5以前でも省略できます。
liタグとかoptionタグとかは効果絶大です。
- 一番手っ取り早いのはインラインでJSやCSSを書いてしまうことです
でも弊害があります。
- じゃあこれって結局どうすればいいのかと
リクエストは減らせばいい?外部ファイル化
- cdnjs.comやGoogleのヘルプページなどでも使われていたりします。
- headの上部にひたすら羅列することで効果を発揮します。
ここで指定するドメインは何でも良いです。
画像でもCSSでもJSでも、外部に読みに行っているものを指定すると効果的です。
これ、ウォーターフローが結構面白くなるのでお見せしたかったのですが、
ウォータフローをキャプチャするサイトが障害で取れなかったのでお見せできませんでした。。
- フロントエンドの最適化は検証されて、データのある手法が他にもたくさんあるので、非常に奥が深いです。
色々試してみてください。