今天無聊在看gmail首頁的html代碼時,看到了關于頁頭里的“歡迎使用 Gmail”這一行字的UI設計代碼,由此看到為了性能,真正的好網站是怎么優化的:

在上面的這段html頁面中,gmail使用了一個table,代碼如下:
<tr>
<td nowrap="nowrap">
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#c3d9ff" align="center" style="margin-bottom: 5px;">
<tbody><tr>
<td valign="top" align="left" class="bubble tl
"><div class="SPRITE_corner_tl"></div></td>
<td style="padding: 5px 0pt; font-family: arial; text-align: left; font-weight: bold;" rowspan="2" class="bubble"><b>歡迎使用 Gmail</b></td>
<td valign="top" align="right" class="bubble tr
"><div class="SPRITE_corner_tr"></div></td>
</tr>
<tr>
<td valign="bottom" align="left" class="bubble bl
"><div class="SPRITE_corner_bl"></div></td>
<td valign="bottom" align="right" class="bubble br
"><div class="SPRITE_corner_br"></div></td>
</tr>
</tbody></table>
</td>
</tr>
為了既考慮UI效果,又能避免帶來速度上的影響,用了最少的圖片來實現彎角效果(圖片在div的SPRITE_corner
CSS中),從而避免設計成一個大的圖片而影響用戶瀏覽器下載資源的速度。
從我這個非UI設計人員的視角來看,不知道GMAIL這樣設計的初衷是否是這樣的,如果不是的話,請高手賜教。