心有多大舞台便有多大

Embrace changes, pursue excellence, share niceness.

从小处看gmail的性能

今天无聊在看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这样设计的初衷是否是这样的,如果不是的话,请高手赐教。

posted on 2010-04-12 15:41 pony 阅读(342) 评论(0)  编辑  收藏 所属分类: 网站


只有注册用户登录后才能发表评论。


网站导航: