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

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

降低(dī)圖片大小：适應與調整高(gāo)分辨率圖片，在額外的(de)下載時間中占居榜首，占用了寶貴的(de)內(nèi)存與處理(lǐ)資源。

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

2，減少依賴文件

如(rú)果你想為(wèi)移動端用戶隐藏圖片，display:none與visibility：hidden是不能阻止文件下載的(de)，測試下面的(de)代碼：

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

3，保持最小數量的(de)外聯樣式表

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

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

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

4，利用CSS3代替圖片

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

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

5，DATAURI來代替圖片與WEB字體文件

Data uri方案可(kě)以不使用任何額外資源就可(kě)以向html及css中插入內(nèi)容，這個技術可(kě)以在web頁面中插入任何內(nèi)容，通常被用于插入圖片及web字體文件，這個技術最大的(de)好處是可(kě)以減少http請求。

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

6，字體圖标

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

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

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

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

9，手機網站建設其他應該注意的(de)地(dì)方等。

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