今天無(wú)聊在看gmail首頁(yè)的html代碼時(shí)，看到了關(guān)于頁(yè)頭里的“歡迎使用 Gmail”這一行字的UI設(shè)計(jì)代碼，由此看到為了性能，真正的好網(wǎng)站是怎么優(yōu)化的：
在上面的這段html頁(yè)面中，gmail使用了一個(gè)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效果，又能避免帶來(lái)速度上的影響，用了最少的圖片來(lái)實(shí)現(xiàn)彎角效果(圖片在div的SPRITE_corner
CSS中)，從而避免設(shè)計(jì)成一個(gè)大的圖片而影響用戶瀏覽器下載資源的速度。
從我這個(gè)非UI設(shè)計(jì)人員的視角來(lái)看，不知道GMAIL這樣設(shè)計(jì)的初衷是否是這樣的，如果不是的話，請(qǐng)高手賜教。