如何提升网站在移动端的打开速度（转）
原文來(lái)自：http://www.studyofnet.com/news/173.html
本文導(dǎo)讀：“移動(dòng)網(wǎng)絡(luò)”是個(gè)非常模糊的概念， 2g 3g wifi都是移動(dòng)網(wǎng)絡(luò)，但是網(wǎng)絡(luò)特性以及對(duì)應(yīng)的優(yōu)化方法還是有些區(qū)別的。 對(duì)于移動(dòng)端而言，可能最需要關(guān)注的是移動(dòng)網(wǎng)絡(luò)環(huán)境下的訪問(wèn)速度。 重點(diǎn)是減少網(wǎng)絡(luò)傳輸量和交互次數(shù)， 善用本地緩存。
大部分人對(duì)移動(dòng)端的瀏覽體驗(yàn)感到失望，同時(shí)當(dāng)體驗(yàn)提升時(shí)，他們會(huì)在智能手機(jī)上花費(fèi)更多的時(shí)間。因?yàn)?4%的智能手機(jī)用戶希望網(wǎng)站可以在4秒內(nèi)加載完畢，但一半的網(wǎng)站花費(fèi)了二倍以上的時(shí)間，達(dá)到了9秒。下面簡(jiǎn)單介紹一些可以使你的網(wǎng)站在移動(dòng)端跑得更快的技術(shù)。
然而下載速度并不是瓶頸，網(wǎng)絡(luò)延遲及智能機(jī)的內(nèi)存與cpu才是瓶頸。即使手機(jī)可以在4秒內(nèi)下載完1mb，頁(yè)面也要花費(fèi)更長(zhǎng)的時(shí)間去加載，因?yàn)槭謾C(jī)需要接收并解析代碼與圖片。
在桌面端，下載文件只占顯示網(wǎng)站時(shí)間的20%，其余時(shí)間花費(fèi)在解析http請(qǐng)求，獲取樣式表，腳本文件及圖片上。由于移動(dòng)端的cpu，內(nèi)存與緩存跟桌面端完全無(wú)法相提并論，這些在手機(jī)上會(huì)花費(fèi)更長(zhǎng)的時(shí)間。
怎樣減少加載時(shí)間
?
減少依賴文件?: 更少的文件意味著更少的http請(qǐng)求與更快的加載時(shí)間
降低圖片大小: 適應(yīng)與調(diào)整高分辨率圖片，在額外的下載時(shí)間中占居榜首，占用了寶貴的內(nèi)存與處理資源。
減輕客戶端負(fù)擔(dān): 最佳實(shí)踐是重新思考你的javascript，并使之降低到最小尺寸
?
怎樣減少依賴文件
如果你想為移動(dòng)端用戶隱藏圖片，display:none與visibility：hidden是不能阻止文件下載的。測(cè)試下面的代碼：
<div?style="display:none;">????<img?src="image1"?/></div>?<div?style="visibility:hidden;">????<img?src="image2"?/></div>你可以觀察下面的瀑布圖，圖片容器設(shè)置display: none或visibility: hidden后仍然會(huì)被下載。
替代方案是利用css加載背景圖片，之后利用media query媒體查詢來(lái)通過(guò)條件隱藏圖片。這個(gè)技術(shù)最初被Jason grigsby測(cè)試過(guò)，之后被tim kandlec進(jìn)一步拓展。亞馬遜獨(dú)立的移動(dòng)端頁(yè)面使用了此種技術(shù)，根據(jù)設(shè)備來(lái)?xiàng)l件加載特定的圖片。
<meta?name="viewport"?content="width=device-width">?<style>????@media?(max-width:600px)?{????????.image?{????????????display:none;????????}????}????@media?(min-width:601px)?{????????.image?{????????????background-image:?url(image1.jpg);????????}????}?</style><div?class="image"></div>你可以看到圖片不加載的瀑布圖：
?
保持最小數(shù)量的外聯(lián)樣式表
你需要把這些文件合并在一個(gè)文件里，減少http請(qǐng)求。另一種方法，你可以通過(guò)后端處理，通過(guò)判斷設(shè)備來(lái)自動(dòng)插入樣式表。
另一種方案可以使用內(nèi)部樣式。亞馬遜獨(dú)立的移動(dòng)產(chǎn)品頁(yè)面有一個(gè)6 KB大小的外部樣式表,連同一些內(nèi)部樣式。這只需要通過(guò)一個(gè)額外的HTTP請(qǐng)求來(lái)下載所有的頁(yè)面樣式。
?
Sprites圖
Sprites（雪碧圖）技術(shù)可以把經(jīng)常使用的圖片合成為一張圖片，從而減少http請(qǐng)求。比如當(dāng)你將四張圖片合成到一個(gè)sprite中后，http請(qǐng)求從4減少到1.需要顯示的圖片利用background-position屬性來(lái)控制。
?
避免內(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只含有文本。
為了保證web站點(diǎn)加載迅速，最好不要使用iframe。
?
拆分到多個(gè)頁(yè)面(單獨(dú)的移動(dòng)網(wǎng)站)
保持你的核心內(nèi)容在頁(yè)面上,之后提供到次要內(nèi)容的鏈接到次要內(nèi)容。這將減少HTML的加載負(fù)擔(dān)，同時(shí)防止相關(guān)的資源被下載。
亞馬遜的移動(dòng)產(chǎn)品頁(yè)面有通用的產(chǎn)品信息,同時(shí)提供鏈接到“用戶評(píng)論”、“描述和細(xì)節(jié)”和“新&使用提供。
這就減少了三張圖片的HTTP請(qǐng)求,且HTML的大小減少45 KB。
?
保持最少重定向(單獨(dú)的移動(dòng)網(wǎng)站)
亞馬遜有一個(gè)重定向，來(lái)引導(dǎo)游客到單獨(dú)的移動(dòng)頁(yè)面,這帶來(lái)了0.4秒的延遲。與之相比,戴爾的網(wǎng)站有兩個(gè)重定向,帶來(lái)了1.2秒延遲。
?
如何縮小圖片尺寸 : 響應(yīng)式圖片
響應(yīng)式圖片的思路是讓訪客圖像只下載那些最適合他們的設(shè)備的圖片,對(duì)于智能手機(jī),使用低分辨率圖像,可以快速下載和渲染。
亞馬遜的獨(dú)立的移動(dòng)產(chǎn)品頁(yè)面使用響應(yīng)式圖像技術(shù),利用媒體查詢分配一個(gè)特定的背景圖像到一個(gè)div。這是亞馬遜的代碼:
?
HTML 代碼 ??復(fù)制
<style>@media?(max-width:390px)?{}{#image-container?{max-width:?109px;}.image?{}{background-image:?url(image1);}}@media?(max-width:390px)?and?(-webkit-min-device-pixel-ratio:1.5)?{}{.image?{background-image:?url(image2);}}@media?(max-width:390px)?and?(-webkit-min-device-pixel-ratio:2)?{}{.image?{background-image:?url(image3);}}@media?(min-width:391px)?and?(max-width:500px)?{}{#image-container?{max-width:?121px;}.image?{}{background-image:?url(image4);}}@media?(min-width:391px)?and?(max-width:500px)?and?(-webkit-min-device-pixel-ratio:1.5)?{}{.image?{background-image:?url(image5);}}@media?(min-width:391px)?and?(max-width:500px)?and?(-webkit-min-device-pixel-ratio:2)?{}{.image?{background-image:?url(image6);}}@media?(min-width:?501px)?and?(max-width:?767px)?{}{#image-container?{max-width:?182px;}.image?{}{background-image:?url(image5);}}@media?(min-width:?501px)?and?(max-width:?767px)?and?(-webkit-min-device-pixel-ratio:1.5)?{}{.image?{background-image:?url(image7);}}@media?(min-width:?501px)?and?(max-width:?767px)?and?(-webkit-min-device-pixel-ratio:2)?{}{.image?{background-image:?url(image8);}}@media?(min-width:768px)?{}{#image-container?{max-width:?303px;}.image?{}{background-image:?url(image8);}}@media?(min-width:768px)?and?(-webkit-min-device-pixel-ratio:1.5)?{}{.image?{background-image:?url(image8);}}@media?(min-width:768px)?and?(-webkit-min-device-pixel-ratio:2)?{}{.image?{background-image:?url(image8);}} </style><div?id="image-container"><div?class="image"><img?src="image1"></div> </div>?
讓JAVASCRIPT降到最低
星巴克的響應(yīng)式網(wǎng)站在chrome下禁用javascript后，桌面端良好的網(wǎng)絡(luò)環(huán)境下花費(fèi)了3.53秒加載完畢，而啟用javascript后，花費(fèi)了4.73秒，增加了34%。Javascript對(duì)加載時(shí)間的影響，在移動(dòng)端較小的內(nèi)存，cpu及緩存下會(huì)表現(xiàn)得更明顯。通常，我們要重新思考javascript的使用，并保持其在最小尺寸。
一個(gè)很好的例子是BBC移動(dòng)網(wǎng)站的JavaScript。網(wǎng)站不使用外部JavaScript文件——都是內(nèi)聯(lián)。內(nèi)聯(lián)腳本僅限于幾行，沒(méi)有顯著影響內(nèi)存,HTML文件和所有內(nèi)聯(lián)JavaScript花費(fèi)0.78秒加載完畢。就像BBC那樣,亞馬遜的移動(dòng)產(chǎn)品頁(yè)面也沒(méi)有外部JavaScript文件,而使用最少的內(nèi)聯(lián)腳本。HTML文件和所有內(nèi)聯(lián)JavaScript花費(fèi)0.75秒加載完畢。
(請(qǐng)注意,jQuery不是一個(gè)輕量的替代方案,事實(shí)上是jquery本身的補(bǔ)充。)這兩個(gè)網(wǎng)站在iPhone 4下均在4秒內(nèi)加載完畢。使用一個(gè)JavaScript框架前,考慮它是否真的有必要。在某些情況下,使用少量的JavaScript比調(diào)用一個(gè)框架更有效。
?
避免組件
組件對(duì)實(shí)際加載時(shí)間的影響是災(zāi)難性的。
?
服務(wù)器端(后端)技術(shù)
除了優(yōu)化前端,服務(wù)器端技術(shù)也可以用來(lái)加速加載時(shí)間。這些技術(shù)都值得考慮:
緩存HTTP重定向來(lái)加速重復(fù)訪問(wèn);
合并HTTP重定向鏈來(lái)減少重定向;
使用HTTP壓縮來(lái)減少數(shù)量的字節(jié)(Gzip或縮小)。
?
測(cè)試移動(dòng)設(shè)備上的性能
由于移動(dòng)設(shè)備的不可預(yù)知性,測(cè)試多個(gè)設(shè)備上的性能是很重要的。這里有一些免費(fèi)的性能測(cè)試工具:
Mobitest,Akamai：可以對(duì)對(duì)iPhone 4的 iOS 5.0,iPhone 3 g和Nexus S 生成瀑布圖和HAR文件 .注意Nexus S測(cè)試結(jié)果與我們自己的內(nèi)部測(cè)試不一致。我們的服務(wù)器訪問(wèn)日志顯示，當(dāng)我們測(cè)試實(shí)際安卓2。x設(shè)備時(shí)產(chǎn)生了更少的HTTP請(qǐng)求。
“Network Panel,” Chrome Developer Tools
?
結(jié)論
為了滿足移動(dòng)用戶的高期望,你需要對(duì)網(wǎng)站針對(duì)移動(dòng)設(shè)備進(jìn)行優(yōu)化,在4秒或更少的時(shí)間里加載完畢。最好的方式來(lái)達(dá)到4秒這個(gè)魔術(shù)時(shí)間，是通過(guò)減少JavaScript和優(yōu)化HTML、CSS和圖像，保持智能手機(jī)上最少的處理負(fù)荷。
轉(zhuǎn)載于:https://my.oschina.net/liangzhenghui/blog/350188
總結(jié)
以上是生活随笔為你收集整理的如何提升网站在移动端的打开速度（转）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 上班之外勤
- 下一篇： 对接闪送_中国快递业加速出海，圆通上线“