首頁(yè) > 新聞 > 移動(dòng)端網(wǎng)站 > 手機(jī)網(wǎng)站建設(shè)網(wǎng)頁(yè)打開(kāi)速度提升的方法

手機(jī)網(wǎng)站建設(shè)網(wǎng)頁(yè)打開(kāi)速度提升的方法

1，建一個(gè)快速打開(kāi)的手機(jī)網(wǎng)站，就得砍掉非核心體驗(yàn)的過(guò)程

減少依賴(lài)文件：更少的文件意味著更少的http請(qǐng)求與更快的加載時(shí)間。

降低圖片大小：適應(yīng)與調(diào)整高分辨率圖片，在額外的下載時(shí)間中占居榜首，占用了寶貴的內(nèi)存與處理資源。

減輕客戶(hù)端負(fù)擔(dān)：最佳實(shí)踐是重新思考你的javascript，并使之降低到最小尺寸。

2，減少依賴(lài)文件

如果你想為移動(dòng)端用戶(hù)隱藏圖片，display:none與visibility：hidden是不能阻止文件下載的，測(cè)試下面的代碼：

<div style="display:none;">
　　 <img src="logo-none.png" />
　　</div>
　　<div style="visibility:hidden;">
　　 <img src="logo-hidden.png" />
　　</div>

另外替代方案是利用css加載背景圖片，之后利用media query媒體查詢(xún)來(lái)通過(guò)條件隱藏圖片。

3，保持最小數(shù)量的外聯(lián)樣式表

不管怎么樣，樣式表都會(huì)被加載，你需要把這些文件合并在一個(gè)文件里，減少http請(qǐng)求。

另一種方法，你可以通過(guò)后端處理，通過(guò)判斷設(shè)備來(lái)自動(dòng)插入樣式表 (這種方式在wordpress的響應(yīng)式網(wǎng)站中使用過(guò))。

另一種方案可以使用內(nèi)部樣式，亞馬遜獨(dú)立的移動(dòng)產(chǎn)品頁(yè)面有一個(gè)6KB大小的外部樣式表，連同一些內(nèi)部樣式，這只需要通過(guò)一個(gè)額外的HTTP請(qǐng)求來(lái)下載所有的頁(yè)面樣式，亞馬遜的桌面版本并不是很高效，帶有9個(gè)外部樣式表，總共40KB。

4，利用CSS3代替圖片

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

CSS3可以減少http請(qǐng)求，但增加了處理負(fù)荷，我們創(chuàng)建了一系列的html文件，每個(gè)文件包含一個(gè)基本的css3特性，參考下面的圖表，你可以發(fā)現(xiàn)css3帶來(lái)的處理時(shí)間很小，但不能不考慮，特別注意box-shadow對(duì)處理時(shí)間的影響最大。

5，DATAURI來(lái)代替圖片與WEB字體文件

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

Data uri使用很簡(jiǎn)單，你可以按照下面的格式，使用base64編碼過(guò)的數(shù)據(jù)直接插入html與css中代替圖片文件。

6，字體圖標(biāo)

字體圖標(biāo)是利用字體文件來(lái)包含符號(hào)和圖表(如Wingdings或Webdings 都是某種圖標(biāo)字體)，可以用來(lái)代替加載一個(gè)圖像文件，
Wingdings和Webdings有點(diǎn)過(guò)氣了，現(xiàn)在有其他更專(zhuān)業(yè)的Web字體可用的，可以通過(guò)font-face加載。

單獨(dú)的Web字體，對(duì)于所有圖標(biāo)來(lái)講，HTTP請(qǐng)求的數(shù)量可以減少到一個(gè)，如果Web字體使用數(shù)據(jù)URI(如上所述)嵌入頁(yè)面，HTTP請(qǐng)求可以減少到零，這正是WordPress使用的技術(shù)，這是他們樣式表中嵌入的web字體：WordPress訪問(wèn)所有這些圖標(biāo)，不會(huì)有任何額外的HTTP請(qǐng)求，因?yàn)閳D標(biāo)通過(guò)數(shù)據(jù)URI，以Web字體的方式嵌入到WordPress的樣式表中。

同時(shí)，字體圖標(biāo)可以使用CSS3關(guān)鍵幀動(dòng)畫(huà)(這很有用，比如“加載”圖標(biāo)(小菊花))，主要的缺點(diǎn)是，字體圖標(biāo)做成的CSS sprites只能是某個(gè)純色，亞馬遜的css雪碧圖包括彩色圖標(biāo)，因此它不能使用這種技術(shù)。

7，避免內(nèi)聯(lián) iframe

每一個(gè)內(nèi)聯(lián)框架(iframe)都會(huì)生成一個(gè) HTTP 請(qǐng)求，這是在 iframe 內(nèi)沒(méi)有另外依賴(lài)資源的情況下，這是我們做一個(gè)快速測(cè)試，比較一個(gè) iframe 只含有文本。包含一個(gè) iframe 增加了將近 0.2s 的加載時(shí)間，為了保證 web 站點(diǎn)加載迅速，最好不要使用 iframe。當(dāng)然這個(gè)在移動(dòng)端網(wǎng)站應(yīng)該是非常少使用的，子凡經(jīng)常見(jiàn)到的就是在 PC 端用這個(gè)的還挺多的。

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

9，手機(jī)網(wǎng)站建設(shè)其他應(yīng)該注意的地方等。

基于用戶(hù)創(chuàng)新
界面設(shè)計(jì)日新月異，夢(mèng)創(chuàng)義堅(jiān)持基于用戶(hù)需求的界面創(chuàng)新設(shè)計(jì)……
服務(wù)設(shè)計(jì)思維
互聯(lián)網(wǎng)的格局發(fā)生的改變，在我們進(jìn)行設(shè)計(jì)服務(wù)時(shí)更是考慮不同用戶(hù)、不同……
洞察用戶(hù)心理
洞察用戶(hù)有意識(shí)和無(wú)意識(shí)的行為以及心理特征通過(guò)構(gòu)造一系列的服務(wù)來(lái)促進(jìn)……
查看更多 >>

日韩一卡2卡3卡4卡吗_深一点我下面好爽视频_99热久久国产这里有只有精品_男人捅女人下面的视频

手機(jī)網(wǎng)站建設(shè)網(wǎng)頁(yè)打開(kāi)速度提升的方法

最新新聞Latest News