心有多大舞臺便有多大

          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 閱讀(360) 評論(0)  編輯  收藏 所屬分類: 網站

          主站蜘蛛池模板: 右玉县| 南宁市| 南安市| 乌兰县| 时尚| 监利县| 黔南| 铜陵市| 桑植县| 岳普湖县| 饶阳县| 襄汾县| 海安县| 太仆寺旗| 抚顺市| 铁力市| 永和县| 乌恰县| 桃江县| 二连浩特市| 藁城市| 年辖:市辖区| 乌鲁木齐县| 香港| 天全县| 青冈县| 甘洛县| 琼中| 玉环县| 库车县| 白城市| 兰溪市| 泸西县| 和硕县| 东城区| 武清区| 沙雅县| 九龙坡区| 高安市| 佳木斯市| 乌拉特前旗|