建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要為大家展示了“怎么改善移動(dòng)設(shè)備網(wǎng)頁(yè)的性能”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么改善移動(dòng)設(shè)備網(wǎng)頁(yè)的性能”這篇文章吧。
創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)興文,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220
正文
1、桌面網(wǎng)頁(yè)的性能檢測(cè)
桌面瀏覽器使用的頁(yè)面可以利用一個(gè)插件來(lái)檢測(cè)，名為Yslow。Firefox和chrome上都有這個(gè)插件。它是Yahoo主導(dǎo)的一個(gè)項(xiàng)目，地址是： https://github.com/marcelduran/yslow/wiki
在chrome中安裝完YSlow以后，我們打開(kāi)sina的首頁(yè)測(cè)試一下：
（正在加載網(wǎng)頁(yè)組件……）
加載完以后會(huì)出來(lái)一個(gè)分析結(jié)果：
可以看到給出來(lái)的分?jǐn)?shù)是D級(jí)，62分。
YSlow有一套檢驗(yàn)頁(yè)面性能的標(biāo)準(zhǔn)，它會(huì)根據(jù)標(biāo)準(zhǔn)里面的每一條來(lái)檢測(cè)這個(gè)網(wǎng)頁(yè)，并且根據(jù)情況對(duì)該網(wǎng)頁(yè)給出評(píng)級(jí)和建議。如新浪首頁(yè)得到的評(píng)級(jí)和建議分別是：
我們來(lái)看看其中的第一條，Make fewer HTTP request給出的具體建議：
Grade F on Make fewer HTTP requests
This page has 19 external Javascript scripts. Try combining them into one.
This page has 33 external background images. Try combining them with CSS sprites.
Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.
可以看到新浪首頁(yè)的外鏈JS文件很多，這會(huì)導(dǎo)致很多的HTTP請(qǐng)求。過(guò)多的HTTP請(qǐng)求會(huì)降低網(wǎng)頁(yè)的加載速度。
再來(lái)看看新浪得到A的條條，比如 Use GET for AJAX requests，得到的夸獎(jiǎng)是：
When using the XMLHttpRequest object, the browser implements POST in two steps: (1) send the headers, and (2) send the data. It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE's maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.
新浪其實(shí)在很多條條上是做得很好的。不過(guò)還是有可以改進(jìn)的空間。
2、移動(dòng)設(shè)備中網(wǎng)頁(yè)的性能檢測(cè)
桌面瀏覽器可以輕松的安裝插件來(lái)檢測(cè)網(wǎng)頁(yè)的性能，但是移動(dòng)端的瀏覽器就不行了。如果想分析某個(gè)mobile webpage的性能只有一種方法，那就是分析它路由時(shí)候的HTTPRequest和HTTPResponse。大牛們可以試試使用proxy server來(lái)讀route log分析。不過(guò)現(xiàn)在有另外一個(gè)選擇，那就是使用Blaze。它是一個(gè)免費(fèi)的手機(jī)頁(yè)面性能分析服務(wù)，不過(guò)一次只能服務(wù)一個(gè)請(qǐng)求，所以可能需要等待一些時(shí)間，不像YSlow那么快。不過(guò)得出的性能分析還是不錯(cuò)的。
Blaze的地址是 http://mobitest.akamai.com/m/index.cgi
我們用3g新浪來(lái)做測(cè)試：
在地址欄中輸入3g新浪的地址，然后在后面選擇設(shè)備的類型。device和location現(xiàn)在都只有兩種選擇。國(guó)內(nèi)其實(shí)也可以開(kāi)發(fā)一個(gè)這樣的web 服務(wù)。
輸入好參數(shù)后點(diǎn)擊
然后就會(huì)進(jìn)入分析，這個(gè)過(guò)程可能需要幾分鐘的時(shí)間。等待的長(zhǎng)度取決于在你前面排了多少個(gè)分析請(qǐng)求……這個(gè)網(wǎng)站一次只能分析一個(gè)頁(yè)面。
結(jié)果出來(lái)后，會(huì)摘要性地顯示這個(gè)web頁(yè)面的平均加載時(shí)間和大?。?/p>
可以看到3g新浪即使在境外的加載速度也是可以接受的，而且頁(yè)面大小很小。
我們可以看一下更進(jìn)一步的性能分析（點(diǎn)擊查看HAR報(bào)告-HAR：HTTP Archive Report）：
可以查看一下統(tǒng)計(jì)信息
圖片還是占了很大一部分頁(yè)面流量。另外，JS和頁(yè)面文本本身的大小幾乎是相同的，說(shuō)明3g新浪還是很倚重js的。
現(xiàn)在再用它來(lái)試試用移動(dòng)設(shè)備瀏覽器打開(kāi)正常的新浪首頁(yè)會(huì)發(fā)生什么：
可以看到，頁(yè)面會(huì)出現(xiàn)一個(gè)提示，建議用戶使用手機(jī)觸屏版的新浪。
我們?cè)賮?lái)看看HAR文件，看看它是怎么做到這一點(diǎn)的。
可以看到頁(yè)面請(qǐng)求先被發(fā)送到了一個(gè)PWS服務(wù)器（微軟推出的個(gè)人web服務(wù)器）上，然后該請(qǐng)求被重定向（狀態(tài)碼302）至另一個(gè)地址（http://sina.cn）。這些不是關(guān)鍵，看到下面的Request頭部中，user-agent給出了發(fā)出這個(gè)請(qǐng)求所在的設(shè)備以及該設(shè)備運(yùn)行的操作系統(tǒng)類型?？梢圆孪胄吕司褪抢昧诉@個(gè)信息來(lái)做判斷，以提示用戶轉(zhuǎn)用觸屏版的sina。
3、移動(dòng)設(shè)備網(wǎng)頁(yè)的性能瓶頸
分析了若干個(gè)頁(yè)面統(tǒng)計(jì)，基本上都類似于下列分布：
移動(dòng)設(shè)備網(wǎng)頁(yè)的性能顯然受到圖片文件的影響（HTML文件和JS文件的大小也不容小覷）。另外，如果頁(yè)面中含有嵌入式的代碼，如google地圖等，也會(huì)額外加載很多你預(yù)期之外的內(nèi)容從而導(dǎo)致網(wǎng)頁(yè)速度變慢。
4、如何改善移動(dòng)設(shè)備網(wǎng)頁(yè)的性能
改善移動(dòng)設(shè)備的網(wǎng)頁(yè)性能也要從圖片和嵌入代碼塊（google地圖）入手。
4.1 如何縮小圖片的大小以提高移動(dòng)設(shè)備的訪問(wèn)速度？
分為兩種情況：
情況一：圖片是在CSS中，以background形式給出鏈接
那么可以使用PS等軟件將圖片的質(zhì)量降低以降低圖片的大小。
情況二：圖片是在HTML文件中以img標(biāo)簽形式給出
對(duì)于這種情況，就不能使用替代文件的方式了。因?yàn)閳D片本身可能就不是你服務(wù)器提供的，而是外鏈圖片。對(duì)于這種情況，可以使用如下方法進(jìn)行改進(jìn)：
原來(lái)的HTML代碼片段：
代碼如下:
改為：
代碼如下:
sencha.io Src會(huì)自動(dòng)重新構(gòu)造圖片的尺寸以適應(yīng)當(dāng)前設(shè)備的屏幕，這就要求你在提供圖片源的時(shí)候盡量選擇清晰的圖片。sencha是如何做到自動(dòng)根據(jù)設(shè)備重構(gòu)圖片大小的呢？原理很簡(jiǎn)單，就是在服務(wù)器上存儲(chǔ)很多設(shè)備的型號(hào)以及屏幕的尺寸。當(dāng)瀏覽器對(duì)這個(gè)img標(biāo)簽中的圖片做出HTTPRequest的時(shí)候，sencha可以通過(guò)Request頭部的user-agent屬性獲得該設(shè)備的型號(hào)信息，然后查詢到其對(duì)應(yīng)的屏幕尺寸，然后根據(jù)這個(gè)尺寸對(duì)后面的http://[DOMAIN]/[PATH]/brews_images/bensons.jpg圖片進(jìn)行尺寸壓縮，然后在返回給瀏覽器。
這樣做的好處是網(wǎng)頁(yè)設(shè)計(jì)者只需要提供一張高清的圖片，然后就不需要擔(dān)心它是否能夠適應(yīng)各種設(shè)備了，因?yàn)閟encha會(huì)替你做這個(gè)resize的工作。
這樣做的缺點(diǎn)也是顯而易見(jiàn)的，即圖片經(jīng)過(guò)了第三方服務(wù)器，效率上肯定受到影響。并且這是境外服務(wù)，不一定會(huì)支持國(guó)內(nèi)的多數(shù)國(guó)產(chǎn)手機(jī)。不過(guò)國(guó)人倒是可以開(kāi)發(fā)一個(gè)類似的web服務(wù)來(lái)為國(guó)內(nèi)圖片做resize。
4.2 如何處理移動(dòng)設(shè)備頁(yè)面中的地圖呢？
這個(gè)也很簡(jiǎn)單，就是做一個(gè)之前我們提到的邏輯判斷，當(dāng)屏幕小于一定尺寸時(shí)，就將map設(shè)為不可見(jiàn)。如：
代碼如下:
@media screen and (max-width:480px){
/*..other CSS style...*/
#map{
display:none;
}
}
同樣可以這樣處理的還有網(wǎng)頁(yè)頭部大大的banner！
代碼如下:
@media screen and (max-width:480px){
/*..other CSS style...*/
#map{
display:none;
}
#banner{
display:none;
}
}
5、什么是Mobile-first Responsive Web Design 和 Progressive Enhancement
5.1 Mobile-first Responsive Web Design
Mobile-first Responsive Web Design 意為 “RWD techniques that start from a mobile template”。就是說(shuō)RWD的設(shè)計(jì)應(yīng)該從mobile的版本開(kāi)始，慢慢往上增加復(fù)雜性。
Very small screens（很早前的nokia和藍(lán)莓手機(jī)等）：
使用最基本的HTML、最簡(jiǎn)單的布局、很小圖片、有限的css和js
Small screens（智能手機(jī)：iphone等）：
如果手機(jī)支持的話可以增加HTML5特性、簡(jiǎn)單的布局、較小的圖片（比very small screen的大一些）、更多的CSS和js
Medium screens（ipad、tablet之類的）
由于有了更多的空間，因此可以考慮增加可選的內(nèi)容，比如側(cè)邊欄什么的?？梢允褂枚鄼诓季帧？梢允褂幂^大的圖片。
Large screens（如桌面顯示器、電視等）
可以使用寬屏的布局（如三欄或四欄等）、使用大的圖片。對(duì)于電視用戶，要考慮優(yōu)化導(dǎo)航，因?yàn)橛脩艨赡苁钦驹?0英尺外遠(yuǎn)程控制頁(yè)面。
5.2 Progressive Enhancement
Progressive Enhancement將web設(shè)計(jì)視為不同的層次。
第一層是結(jié)構(gòu)內(nèi)容，這一層將決定網(wǎng)頁(yè)的基本結(jié)構(gòu)和內(nèi)容，如果設(shè)計(jì)停留在這一層，那么幾乎所有的設(shè)備都可以打開(kāi)你的頁(yè)面。
第二層和第三層是CSS和JS，你無(wú)法保證所有的設(shè)備都支持這些特性，但若支持，那么用戶將獲得良好的體驗(yàn)。
很多年來(lái)，web開(kāi)發(fā)者們都在前衛(wèi)的瀏覽器上開(kāi)發(fā)web應(yīng)用，而忽略了那些使用舊版本瀏覽器的用戶。（這一情況好像國(guó)內(nèi)不是很嚴(yán)重，大家還是很照顧老瀏覽器用戶的）。Progressive Enhancement的設(shè)計(jì)理念則是反過(guò)來(lái)，重視內(nèi)容，然后再往上增加用戶體驗(yàn)。在設(shè)備不支持的情況下，至少可以保證頁(yè)面內(nèi)容的可達(dá)性。
5.3 content-first design
Mobile-first Responsive Web Design和Progressive Enhancement有時(shí)又被稱為content-first design，這是因?yàn)樗鼈兌际种匾晝?nèi)容的重要性，并將其排在設(shè)計(jì)的第一位。一個(gè)很好的content-first應(yīng)該在網(wǎng)頁(yè)裸奔的情況下信息組織也井井有條。
以上是“怎么改善移動(dòng)設(shè)備網(wǎng)頁(yè)的性能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)頁(yè)標(biāo)題：怎么改善移動(dòng)設(shè)備網(wǎng)頁(yè)的性能
標(biāo)題鏈接：http://fisionsoft.com.cn/article/gsodis.html
