2009年08月21日

『table-layout』を使おう! その3

こんにちは。
溝上です。

『table-layout』を使おう! その3』をお送りします。
3回続いたtable-layoutの紹介も今回で最終回となります。
それでは今まで同様にtable-layoutの効果を簡単に説明します。

table-layoutにfixedを指定すると
1.tableの幅が指定されており、th,tdで幅が指定されていない場合、同じ幅になる
2.1行目のtd,thの幅が2行目以降に適用される
3.ページの表示速度がUPする

▼ページの表示速度がUPする


前回前々回とtable-layoutを調べ始めたとき、もっとも驚いた効果が
ページの表示速度がUPするです。
前回でも説明しましたが、table-layoutがfixedの場合
1行目が読み込まれた時点でth,tdの幅を決定しているようです。
その為、表示に関する処理が省かれ、ページの表示速度がUPする・・・らしいです。
これはもう実際にサンプルを作って計測してみるしかない!
というわけでどうぞ。

(cssサンプル)
body {
  padding:15px;
}
.section {
  width:100%;
  padding-bottom:30px;
}
table {
  table-layout:fixed;
  width:100%;
}
table th,
table td {
  border:1px solid #000000;
}
htmlコーディング例
<div class="section">
<table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>



autoの場合
fixedの場合
※とても巨大なtableのサンプルを使用しています。注意!

上記のサンプルを私の環境でキャッシュを消しながら10回ずつ表示させ、
Firefoxのアドオン『YSlow』を使って表示速度を計ってみました。
(私のやった結果なのであくまで参考程度にどうぞ)

(※単位:秒) auto fixed  
1回目 0.409 0.395  
2回目 0.402 0.403  
3回目 0.4 0.392  
4回目 0.411 0.392  
5回目 0.431 0.398  
6回目 0.4 0.391  
7回目 0.415 0.399  
8回目 0.417 0.403  
9回目 0.4 0.402  
10回目 0.415 0.401
平均 0.41 0.3976 0.0124

おお、早くなってる。
fixedを指定した場合、autoと比べ確実にちょっとだけ早くなっています。
・・・本当にちょっとですね。
もっと劇的に効果がわかるようなソースが見つけられれば良かったのですが・・・

でもCSSのプロパティを1行追加して表示速度がUPする、
というのはとても魅力的だと思います。
使える場面ではどんどん指定していくと素敵ですね。

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 19:23 | Comment(0) | TrackBack(0) | 情報
この記事へのコメント

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。