みなさま明けましておめでとうございます。

マカオ行きの旅のおともに持って行ったハイパフォーマンスWebサイトの本のまとめをここに。(どこぞやのbugcloudに頼まれたので。)
この本、2010年頃の出版なので若干情報が古い。ただ、やる事に関しては特に変わりがないので特に問題なし。

ザクっと読んだ印象はHTML5やCSS3が、どうこうではなく、サイトを制作する上で基本的なところをちゃんと押さえる、という感じ。
なのでここには気になった部分だけ書いて行きます。
Javascriptまわりで勉強したい部分が多かった。
大きなまとめは
「フロントエンドを改善していった方が、改善の時間もサイトのレスポンスも早くなるよ」
とのこと。
で、読んだ感じ大きくまとめてザクっと4つ。

1.HTTPリクエストの話

2.Javascriptの話

-JavaScriptを分割して最初のロードを最小限にして、あとから残りのJavaScriptをロードする「遅延ロード」を推奨(これに関してはどのやり方が良い、というのはなく、場合によってやり方を変える、等で紹介されていました。)
その他紹介されていたテクニックもいくつか

-Javascriptはローカル変数の読み書きがもっとも高速

-for-inは遅いので使用しない方が良い

などなど、細かい部分や気になったところは後日載せます。

3.CSSの話

-セレクタはなるべく単純にする。これは個人的にスッキリしている方が好きだったのであまりズラっと書いていなかったけれど、確かに言われてみればセレクタを右から解析して左にいくわけだから、 ズラズラと書いていればいるほど、処理が多くなるな、と。

4.画像の話

1.CDNを使う → CloudFlareとかかな

2.gifはなるべく使わずpng(png8)を使用する。(この方が画像サイズが軽くなるらしい。 )

3.アイコン系やボタン系を一つの画像にまとめbackgroundで配置

4.ツールを使用し、jpgからMETAデータを削除する。
最適化ツール→PNGCRUSH
でもこれは正直web用に保存で十分なのでは？と思うけど違うのかな。

5.favicon(apple iconも)の読み込みは絶対発生するので必ず用意すること

[掲載してあった高速化をする14のルール]

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

ルール2 : CDNを使う

ルール3 : Expiresヘッダを設定する

ルール4 : コンポーネントをgzipする

ルール5 : スタイルシートは先頭に置く

ルール6 : スクリプトは最後に置く

ルール7 : CSS expressionの使用を控える

ルール8 : JavaScriptとCSSは外部ファイル化する

ルール9 : DNSルックアップを減らす

ルール10 : JavaScriptを縮小化する

ルール11 : リダイレクトを避ける

ルール12 : スクリプトを重複させない

ルール13 : ETagの設定を変更する

ルール14 : Ajaxをキャッシュ可能にする

最後に関連サイト

グーグルがWebを高速化するために何をしているか

Javascriptが遅い原因

facebook APIを使う機会が出来たので情報まとめ

認証が必要なAPIをたたくとき

var appId = "appIDを入れる";
if(window.location.hash.length == 0){
	url = "https://www.facebook.com/dialog/oauth?client_id=" +
	appId  + "&redirect_uri=" + window.location +　"&response_type=token";
	window.location.href = url;
} else {
	accessToken = window.location.hash.substring(1);
	//Friendsを取得
	graphUrl = "https://graph.facebook.com/me/friends?" + accessToken +　"&callback=コールバック名"

	//use JSON-P to call the graph
	var script = document.createElement("script");
	script.src = graphUrl;
	document.body.appendChild(script);
}

※ connectionについて調べる

<p id="btn_link"><a href="javascript:void(0);">LINK</a></p>

こう書くと、処理がぶつかる可能性を回避できる。
名前の汚染を防ぐためにできるだけprototypeをうまく使う、と。

$("#myID").bind('change',checkval);

このコードでselect要素が変わった時に何かを実行する、としていたのだけど、これだとキーボードの上下で選択したときに効かない、という事を発見。

なので、下記のコードも加えておくと、両方いけるようになる。

$("#myID").keyup(function(e){
 console.log("changed");
});

どうやればいいのか探していたところ、下記のサイトを発見したのでこれも参考にしてみると良いかも。

参考サイト

jQueryのchangeイベントはjQueryのヴァージョンによって違う。

とりあえず、jQuery1.6でどうなったのかこれから調べるとする。。

旧デザイン

http://twitter.com/home?status=

新デザイン

http://twitter.com/?status=

例)http://twitter.com/?status=この文字列をつけて投稿

「home」をとればOK

■margin,paddingを含んだ高さを取得する方法
outerHeight、outerWidth（true）
jQueryだと.outerHeight({margin: true})でいける。

ここ2回くらい連続で案件でやったので、jQueryでfadeIn();がIE6で効かない時のバグの回避の仕方メモ

通常コレのところを

$("id名").fadeIn("slow");

下記のように書き換える

$("id名").css({filter:''});
$("id名").fadeIn("slow", function(){
	$(self.select_name).css('filter','');
});

2010.09.03追加
Tyler Durden

Hannibal Lector

2Charactors(EinStein & Tyler Durden)