Blogs

Webサイトの高速化 ルール7 CSSのExpression()は使わない! (Yahoo! developer netoworkより翻訳)

ハイパフォーマンスWebサイト フロントエンドのパフォーマンスの重要性から続いています。

Webサイトの高速化 ルール7 CSSのExpression()は使わない!

July 16, 2007

——————————————————————————

http://developer.yahoo.net/blog/archives/performance/より翻訳。

Steve Souders は Yahoo!の「Chief Performance Yahoo!」です。

これは彼の「パフォーマンス改善のベストプラクティス」を書いた一連のブログです。

——————————————————————————

CSS のIE独自拡張である expression 関数は、CSSのプロパティを動的にセットするのに強力(かつ危険)な方法です。それらはIEの5以上でのみサポートされています。例えば、xpression 関数を使えば背景色を1時間毎に変更できます。

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );

上に示した通り、expression 関数を使うとCSSの中でJavascriptが使えるようになります。
結果としてCSSのプロパティにJavaScriptの評価結果がセットされますが、IE以外のブラウザでは無視されます。なので、ブラウザ間で一環した表現をするために、IEだけをを特別扱いする必要がるような場合に役に立ちます。

問題はexpression 関数が思っている以上にやたらに評価されてしまうということです。ページが再描画されたりリサイズされたりする時だけではなく、スクロールしたり、マウスを動かしたりする場合にさえ評価されてしまいます。expression 関数にカウンタを書いて、どれくらい頻繁に評価されるのか追いかけてみたところ、ページ上をマウスカーソルを動かし続けたら、ちょっとの間に1万回も評価されていました。

expression 関数の評価の回数を減らすためには、one-time expressionを使いましょう。これならexpression 関数が最初に評価された時に書き換えてしまい、プロパティに明示的な値をセットできます。どうしても、そのページを表示している間ずっと、動的にプロパティをセットし続けることが必要なら、イベントハンドラを使いましょう。expression 関数は何千回も評価されることでページのパフォーマンスに影響を与えてしまうことを忘れないで下さい。

Steve Souders

———————————————————————
◆◆訳注◆◆

one-time expressionはこんな感じだそうです。自分を上書きしています。


<style> P {     background-color: expression(altBgcolor(this)); } </style> <script>function altBgcolor(elem) {     elem.style.backgroundColor = (new Date()).getHours()%2 ? "#F08A00" : "#B8D4FF"; } </script>

イベントハンドラのサンプルだそうです。


window.onresize = setMinWidth;
function setMinWidth() {
var aElements =
document.getElementsByTagName("p");
for ( var i = 0; i &lt; aElements.length; i++ ) {
aElements[i].runtimeStyle.width = (
document.body.clientWidth&lt;600 ?
"600px" : "auto" );
}
}

———————————————————————
エントリ一覧

Webサイトの高速化 フロントエンドのパフォーマンスの重要性
Webサイトの高速化 ルール1 HTTPリクエストの数を減らそう!
Webサイトの高速化 ルール2 CDNを使おう!
Webサイトの高速化 ルール3 Expiresヘッダーを追加しよう!
Webサイトの高速化 ルール4 コンポーネントを圧縮しよう!
Webサイトの高速化 ルール5 CSSは上に!
Webサイトの高速化 ルール6 scriptは下に!
Webサイトの高速化 ルール7 CSSのExpression()は使わない!
Webサイトの高速化 ルール8 JavaScriptとCSSは外部ファイルに!
Webサイトの高速化 ルール9 DNS Lookupsを減らそう!
Webサイトの高速化 ルール10 コードのサイズを圧縮する!
Webサイトの高速化 ルール11 リダイレクトを避けよう!
Webサイトの高速化 ルール12 スクリプトの重複に気をつける!
Webサイトの高速化 ルール13 ETagを正しく設定する!

kajiwaraWebサイトの高速化 ルール7 CSSのExpression()は使わない! (Yahoo! developer netoworkより翻訳)