1,建一個(gè)快速打開(kāi)的手機(jī)網(wǎng)站,就得砍掉非核心體驗(yàn)的過(guò)程,
減少依賴文件:更少的文件意味著更少的http請(qǐng)求與更快的加載時(shí)間。
降低圖片大?。哼m應(yīng)與調(diào)整高分辨率圖片,在額外的下載時(shí)間中占居榜首,占用了寶貴的內(nèi)存與處理資源。
減輕客戶端負(fù)擔(dān):好實(shí)踐是重新思考你的javascript,并使之降低到最小尺寸。
2,減少依賴文件
如果你想為移動(dòng)端用戶隱藏圖片,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媒體查詢來(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)在有其他更專業(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)有另外依賴資源的情況下,這是我們做一個(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,減少客戶端處理:Javascript 對(duì)加載時(shí)間的影響,在移動(dòng)端較小的內(nèi)存,cpu 及緩存下會(huì)表現(xiàn)得更明顯,通常,我們要重新思考 javascript 的使用,并保持其在最小尺寸。
9,
手機(jī)網(wǎng)站建設(shè)其他應(yīng)該注意的地方等。
本文標(biāo)題:手機(jī)網(wǎng)站建設(shè)網(wǎng)頁(yè)打開(kāi)速度提升的方法
網(wǎng)頁(yè)網(wǎng)址:http://aaarwkj.com/news43/127593.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)