JavaScriptの圧縮

HTMLを綺麗にしないで高速化は出来ない。の中でJavaScriptやcssの圧縮の話がある訳ですが、ちょっとGoogle様に問うてみたらまぁ出る事でる事。

取りあえずまず本の中で紹介されてるJavaScript圧縮方法
■YUI Compressor

で続いてWEBで見つけた圧縮方法
■prototype.jsを10KBにする方法
■Makeを利用したJavaScriptファイルの結合・圧縮
■JavaScriptやCSSを動的にdeflate圧縮するのではなく、あらかじめ圧縮しておいたものを配信することでサーバーのCPUリソースを節約する

gzip圧縮したJavaScriptを配信しても大丈夫なんだな･･･当たり前か。
問題があるのはWebkit系で、一番面倒なIE6は対応してるという珍しいケース。
これは場合によっちゃ導入するかな

HTMLを綺麗にしないで高速化は出来ない。

仕事の都合と自分の趣味の両方で必要になったので買ってみた。
HTMLの表示、応答時間、Renderingにかかる時間を減らして全体的に高速化する方法をまとめてある本。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
	武舎 広幸 福地 太郎 武舎 るみ オライリージャパン 2008-04-11 売り上げランキング : 16442 おすすめ平均 仕事で作る人、趣味で作る人、両方にためになります フロントエンド方面の最適化手法がわかる本 目からウロコでした。 Amazonで詳しく見る by G-Tools

個人的にはW3C準拠とかcss整理とかJavaScriptの整理だとか重要視してて大好きなんだけど、仕事だとどうしても裏側のLogic部分だったり、HTMLは兎に角画面がキチンとでればそれでOKが優先されて来てた。
が、最近になってやっとこっちの重要性が理解され始めたのと、抜本的な高速化が決まったので本格的に作業をする事に。
という経緯で買った本。

バックエンド側(Server処理)にかかる時間が半分になっても、応答時間全体の5～10%程度が早くなるだけ。
フロントエンド側(通信とかRenderingとか)にかかる時間が半分になれば、応答速度全体の40～45%が早くなる。

最初のこの言葉に納得。
実際Server側の処理早くしても、Tableタグ使いまくりとか、JavaScriptファイルがばらばらとか、HTML中に記述とか、cssがばらばらなHTMLじゃ殆ど意味ないからな･･･。

さてこの本に書かれている具体的な高速化手段は

• HTTPリクエストを減らす
• CDNを使う
• Expiresヘッダを使う
• コンポーネントをgzipする
• スタイルシートは先頭に置く
• スクリプトは最後におく
• CSS Expressionの使用を控える
• JavaScriptとCSSは外部ファイル化する
• DNSルックアップを減らす
• JavaScriptを縮小化する
• リダイレクトを避ける
• スクリプトを重複させない
• ETagの設定を変更する
• AJAXをキャッシュ可能にする

･･･まぁ辺り前な事だけど、実際はキチンとやられてないんだよな。
取りあえず順次実践してくしかない。
キャッシュの管理についてもBrowserとかに任せて放置じゃなくて意図的に操作しないと駄目だなぁ。

CSS2.0のセレクタ

そろそろ準備しておかないとね･･･。
■セレクタ-CSS2.0リファンレス
■CSS2.0対応状況ガイド

青天の霹靂。ってか晴天の天変地異

■IE8がAcid2に合格。2008年前半にIE8β
(　ﾟдﾟ)

(つд⊂)ｺﾞｼｺﾞｼ

(；ﾟдﾟ)

(つд⊂)ｺﾞｼｺﾞｼ
　　_, ._
（；ﾟ Дﾟ） …？!

(つд⊂)ｺﾞｼｺﾞｼｺﾞｼｺﾞｼｺﾞｼｺﾞｼｺﾞｼｺﾞｼ

(　　д　)

(；　Д　) !!

【CSS】神の一手、悪魔の3px

CSSをいぢくり回すwebデザイナ、webアプリ開発者にとって最も嫌われている、嫌うべき、むしろSupportを切るべきブラウザであるIE6。IE6が抱えるCSS周りのバグの真骨頂を見た。

バグの内容としては

floatを指定したObjectより、その隣にくるObjectの高さが低い時、後者のwidthに「3px」幅が追加される

という物。まぁ百聞は一見にしかず。見て貰う方が早い。ネットで探して見つけた、このバグに関するWebページ。
■IE6ボックスバグ
をIE6で開いてみてください。この問題で苦しんでいた方々には朗報だと思います。

向かって右側のdivタグ側に

zoom:1

というcssを付け加えれば直るみたいっすね。

cssによる透明度の設定

filter: alpha(opacity=60);
-moz-opacity:0.60;
opacity:0.60;

上から、IE、Firefox、Opera/safari用。
100で不透明。

IE6でwidthを設定しても反映されない時

その問題が起きているタグのスタイルに

overflow:hidden;

を追加してみる。