Tips | Branberyheag!! Lab

DOMの操作は可能な限りやめる
eval, new Function() は遅いので可能な限り使わない
withステートメントを使わない（使った事ないですが）
for-in 文ではなく for 文を使う。
ループの中で try-catch ではなく、try-catchの中にループを置く
グローバル変数をなるべく使わない
aaa+=’AAA’;aaa+=’BBB’; の方が aaa=’AAA’+'BBB’;より速い
複数の文字列連結には、Array で文字列を定義しておいてjoinを使うとよいらしい
Math.min(val1, val2) のような関数を使わずに、val1 < val2 ? val1 : val2; のように三項演算を使うとよい
また、 array.push(‘new’); は array[array.length] = ‘new’; より遅い
setTimeout(“kansu()”, 1000) は　setTimeout(kansu, 1000) より遅い
for(var i=0; i < someArray.length; i++) {…} はfor (var i=0, loopLen=someArray.length; i<loopLen; i++) {…} より遅い
jQuery(“ul > li”) のように使う。 jQuery(“ul li”) は広義すぎる
jQueryの element.css({display:none}); の方が element.hide() より速い
DOM操作が終わったらリファレンスの変数を解放する
Ajax の GET は POST より速く動作する
アニメーションの過度な利用は控える
JSフレームワークの利用を制限する

サーバサイド

静的なコンテンツはHTTPヘッダでキャッシュさせよう（サーバサイドスクリプトの話）
CSS, JS ファイルはgzipしよう。ただし、（CPU使用率とのバランスは重要です）
JavaScript は　minify して転送量を下げる

CSS、HTML

CSSは@import より<link> を使う
CSSスプライトを使う
CSSを最初におこう
HTMLでのDOMの構造をシンプルにコーディングしよう
background-repeatは避けるno-repeatにする
テーブルを使わない。使う場合は table-layout:fixed で効率的なレンダリングが行われる

知っていることもおおかったかもしれませんが、しらないこともありました。
勿論実際に検証してみることも必要だと思いますが、参考までに。

背景画像を使用しないCSSスプライト

06/7

isaoCSS Tips No Comments

これ、使えそうなので、メモ。

元ネタは、こちら
CSS Sprites w/out Using Background Images

背景画像を使わずにimg要素で呼び出した画像をCSSスプライトとして呼び出すテクニック。


<div>
<a href="#"><img src="rokkan.gif" alt="" /></a>
<a href="#"><img src="designcubicle.gif" alt="" /></a>
</div>

使用されている画像は、カーソルを合わせなかった時、合わせた時の画像を一枚にしている状態。

背景画像を位置変更ではなくoverflow:hidden;にしている。
コントロールは、margin-topで制御している。


.affiliates a {
width: 204px; height:182px;
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
}
.affiliates a:hover img {
margin-top: -182px;
}

このテクニックを使う条件として、正確な画像の縦、横のサイズが分かることが必要で、hoverには、margin-topを使っている。

この記事でCSS3のtransitionを使ってアニメーション効果を出すテクニックも記載されている。


.affiliates a {
width: 204px; height:182px;
overflow: hidden;
float: left;
}
.affiliates img {
border: none;
margin: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.affiliates a:hover img {
margin-top: -182px;
}

どこかで使えそうなテクニックだよね。。。

タグ

カテゴリー