1，建一(yī)個快速打開(kāi)的手機網站，就得砍掉非核心體(tǐ)驗的過程，

減少依賴文件：更少的文件意味着更少的http請求與更快的加載時間。

降低圖片大(dà)小(xiǎo)：适應與調整高分(fēn)辨率圖片，在額外(wài)的下(xià)載時間中(zhōng)占居榜首，占用了寶貴的内存與處理資(zī)源。

減輕客戶端負擔：最佳實踐是重新思考你的javascript，并使之降低到最小(xiǎo)尺寸。

2，減少依賴文件

如果你想爲移動端用戶隐藏圖片，display:none與visibility：hidden是不能阻止文件下(xià)載的，測試下(xià)面的代碼：

    <div style="display:none;">
    　　    <img src="logo-none.png" />
    　　</div>
    　　<div style="visibility:hidden;">
    　　    <img src="logo-hidden.png" />
    　　</div>
另外(wài)替代方案是利用css加載背景圖片，之後利用media query媒體(tǐ)查詢來通過條件隐藏圖片。

3，保持最小(xiǎo)數量的外(wài)聯樣式表

不管怎麽樣 ，樣式表都會被加載，你需要把這些文件合并在一(yī)個文件裏，減少http請求。

另一(yī)種方法，你可以通過後端處理，通過判斷設備來自動插入樣式表 (這種方式在wordpress的響應式網站中(zhōng)使用過)。

另一(yī)種方案可以使用内部樣式，亞馬遜獨立的移動産品頁面有一(yī)個6KB大(dà)小(xiǎo)的外(wài)部樣式表，連同一(yī)些内部樣式，這隻需要通過一(yī)個額外(wài)的HTTP請求來下(xià)載所有的頁面樣式，亞馬遜的桌面版本并不是很高效，帶有9個外(wài)部樣式表，總共40KB。

4，利用CSS3代替圖片

圓角，陰影，漸變填充等，這些樣式不需要使用圖片，可以減少http請求，加快加載時間

CSS3可以減少http請求，但增加了處理負荷，我(wǒ)們創建了一(yī)系列的html文件，每個文件包含一(yī)個基本的css3特性，參考下(xià)面的圖表，你可以發現css3帶來的處理時間很小(xiǎo)，但不能不考慮，特别注意box-shadow對處理時間的影響最大(dà)。

5，DATAURI來代替圖片與WEB字體(tǐ)文件

Data uri方案可以不使用任何額外(wài)資(zī)源就可以向html及css中(zhōng)插入内容，這個技術可以在web頁面中(zhōng)插入任何内容，通常被用于插入圖片及web字體(tǐ)文件，這個技術最大(dà)的好處是可以減少http請求。

Data uri使用很簡單，你可以按照下(xià)面的格式，使用base64編碼過的數據直接插入html與css中(zhōng)代替圖片文件。

6，字體(tǐ)圖标

字體(tǐ)圖标是利用字體(tǐ)文件來包含符号和圖表(如Wingdings或Webdings 都是某種圖标字體(tǐ))，可以用來代替加載一(yī)個圖像文件，
Wingdings和Webdings有點過氣了，現在有其他更專業的Web字體(tǐ)可用的，可以通過font-face加載。

單獨的Web字體(tǐ)，對于所有圖标來講，HTTP請求的數量可以減少到一(yī)個，如果Web字體(tǐ)使用數據URI(如上所述)嵌入頁面，HTTP請求可以減少到零，這正是WordPress使用的技術，這是他們樣式表中(zhōng)嵌入的web字體(tǐ)：
,WordPress訪問所有這些圖标，不會有任何額外(wài)的HTTP請求，因爲圖标通過數據URI，以Web字體(tǐ)的方式嵌入到WordPress的樣式表中(zhōng)。
同時，字體(tǐ)圖标可以使用CSS3關鍵幀動畫(這很有用，比如“加載”圖标(小(xiǎo)菊花))，主要的缺點是，字體(tǐ)圖标做成的CSS sprites隻能是某個純色，亞馬遜的css雪碧圖包括彩色圖标，因此它不能使用這種技術。

7，避免内聯 iframe：
每一(yī)個内聯框架(iframe)都會生(shēng)成一(yī)個 HTTP 請求，這是在 iframe 内沒有另外(wài)依賴資(zī)源的情況下(xià)，這是我(wǒ)們做一(yī)個快速測試，比較一(yī)個 iframe 隻含有文本。包含一(yī)個 iframe 增加了将近 0.2s 的加載時間，爲了保證 web 站點加載迅速，最好不要使用 iframe。當然這個在移動端網站應該是非常少使用的，子凡經常見到的就是在 PC 端用這個的還挺多的。

8，減少客戶端處理：Javascript 對加載時間的影響，在移動端較小(xiǎo)的内存，cpu 及緩存下(xià)會表現得更明顯，通常，我(wǒ)們要重新思考 javascript 的使用，并保持其在最小(xiǎo)尺寸。

9，手機網站建設其他應該注意的地方等。

責任編輯：中(zhōng)山網站建設
 【網訊網絡】國家高新技術企業》十年專注軟件開(kāi)發，網站建設，網頁設計，APP開(kāi)發，小(xiǎo)程序，微信公衆号開(kāi)發，定制各類企業管理軟件（OA、CRM、ERP、訂單管理系統、進銷存管理軟件等)！服務熱線：0760-88610046、13924923903，http://www.wansion.net