前言

移動設(shè)備由于受到帶寬、處理器運(yùn)算速度的限制，因而對網(wǎng)頁的性能有更高的要求。究竟是網(wǎng)頁中的何種元素拉低了網(wǎng)頁在移動設(shè)備中加載的速度呢？這些元素應(yīng)該做何處理以提升頁面在移動設(shè)備中的整體性能？是否存在一種設(shè)計模式可以同時滿足移動端及桌面端的頁面設(shè)計呢？

本文目錄：

1、桌面網(wǎng)頁的性能檢測

2、移動設(shè)備中網(wǎng)頁的性能檢測

3、移動設(shè)備網(wǎng)頁的性能瓶頸

4、如何改善移動設(shè)備網(wǎng)頁的性能

5、什么是Mobile-first Responsive Web Design和Progressive Enhancement

正文

1、桌面網(wǎng)頁的性能檢測

桌面瀏覽器使用的頁面可以利用一個插件來檢測，名為Yslow。Firefox和chrome上都有這個插件。它是Yahoo主導(dǎo)的一個項目，地址是： https://github.com/marcelduran/yslow/wiki

在chrome中安裝完YSlow以后，我們打開sina的首頁測試一下：

（正在加載網(wǎng)頁組件……）

加載完以后會出來一個分析結(jié)果：

可以看到給出來的分?jǐn)?shù)是D級，62分。

YSlow有一套檢驗頁面性能的標(biāo)準(zhǔn)，它會根據(jù)標(biāo)準(zhǔn)里面的每一條來檢測這個網(wǎng)頁，并且根據(jù)情況對該網(wǎng)頁給出評級和建議。如新浪首頁得到的評級和建議分別是：

我們來看看其中的第一條，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.

可以看到新浪首頁的外鏈JS文件很多，這會導(dǎo)致很多的HTTP請求。過多的HTTP請求會降低網(wǎng)頁的加載速度。

再來看看新浪得到A的條條，比如 Use GET for AJAX requests，得到的夸獎是：

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.

新浪其實在很多條條上是做得很好的。不過還是有可以改進(jìn)的空間。

2、移動設(shè)備中網(wǎng)頁的性能檢測

桌面瀏覽器可以輕松的安裝插件來檢測網(wǎng)頁的性能，但是移動端的瀏覽器就不行了。如果想分析某個mobile webpage的性能只有一種方法，那就是分析它路由時候的HTTPRequest和HTTPResponse。大牛們可以試試使用proxy server來讀route log分析。不過現(xiàn)在有另外一個選擇，那就是使用Blaze。它是一個免費(fèi)的手機(jī)頁面性能分析服務(wù)，不過一次只能服務(wù)一個請求，所以可能需要等待一些時間，不像YSlow那么快。不過得出的性能分析還是不錯的。

Blaze的地址是 http://mobitest.akamai.com/m/index.cgi

我們用3g新浪來做測試：

在地址欄中輸入3g新浪的地址，然后在后面選擇設(shè)備的類型。device和location現(xiàn)在都只有兩種選擇。國內(nèi)其實也可以開發(fā)一個這樣的web 服務(wù)。

輸入好參數(shù)后點擊

然后就會進(jìn)入分析，這個過程可能需要幾分鐘的時間。等待的長度取決于在你前面排了多少個分析請求……這個網(wǎng)站一次只能分析一個頁面。

結(jié)果出來后，會摘要性地顯示這個web頁面的平均加載時間和大?。?/p>

可以看到3g新浪即使在境外的加載速度也是可以接受的，而且頁面大小很小。

我們可以看一下更進(jìn)一步的性能分析（點擊查看HAR報告-HAR：HTTP Archive Report）：

可以查看一下統(tǒng)計信息

圖片還是占了很大一部分頁面流量。另外，JS和頁面文本本身的大小幾乎是相同的，說明3g新浪還是很倚重js的。

現(xiàn)在再用它來試試用移動設(shè)備瀏覽器打開正常的新浪首頁會發(fā)生什么：

可以看到，頁面會出現(xiàn)一個提示，建議用戶使用手機(jī)觸屏版的新浪。

我們再來看看HAR文件，看看它是怎么做到這一點的。

可以看到頁面請求先被發(fā)送到了一個PWS服務(wù)器（微軟推出的個人web服務(wù)器）上，然后該請求被重定向（狀態(tài)碼302）至另一個地址（http://sina.cn）。這些不是關(guān)鍵，看到下面的Request頭部中，user-agent給出了發(fā)出這個請求所在的設(shè)備以及該設(shè)備運(yùn)行的操作系統(tǒng)類型。可以猜想新浪就是利用了這個信息來做判斷，以提示用戶轉(zhuǎn)用觸屏版的sina。

3、移動設(shè)備網(wǎng)頁的性能瓶頸

分析了若干個頁面統(tǒng)計，基本上都類似于下列分布：

移動設(shè)備網(wǎng)頁的性能顯然受到圖片文件的影響（HTML文件和JS文件的大小也不容小覷）。另外，如果頁面中含有嵌入式的代碼，如google地圖等，也會額外加載很多你預(yù)期之外的內(nèi)容從而導(dǎo)致網(wǎng)頁速度變慢。

4、如何改善移動設(shè)備網(wǎng)頁的性能

改善移動設(shè)備的網(wǎng)頁性能也要從圖片和嵌入代碼塊（google地圖）入手。

4.1 如何縮小圖片的大小以提高移動設(shè)備的訪問速度？

分為兩種情況：

情況一：圖片是在CSS中，以background形式給出鏈接

那么可以使用PS等軟件將圖片的質(zhì)量降低以降低圖片的大小。

情況二：圖片是在HTML文件中以img標(biāo)簽形式給出

對于這種情況，就不能使用替代文件的方式了。因為圖片本身可能就不是你服務(wù)器提供的，而是外鏈圖片。對于這種情況，可以使用如下方法進(jìn)行改進(jìn)：

原來的HTML代碼片段：

改為：


sencha.io Src會自動重新構(gòu)造圖片的尺寸以適應(yīng)當(dāng)前設(shè)備的屏幕，這就要求你在提供圖片源的時候盡量選擇清晰的圖片。sencha是如何做到自動根據(jù)設(shè)備重構(gòu)圖片大小的呢？原理很簡單，就是在服務(wù)器上存儲很多設(shè)備的型號以及屏幕的尺寸。當(dāng)瀏覽器對這個img標(biāo)簽中的圖片做出HTTPRequest的時候，sencha可以通過Request頭部的user-agent屬性獲得該設(shè)備的型號信息，然后查詢到其對應(yīng)的屏幕尺寸，然后根據(jù)這個尺寸對后面的http://[DOMAIN]/[PATH]/brews_images/bensons.jpg圖片進(jìn)行尺寸壓縮，然后在返回給瀏覽器。

這樣做的好處是網(wǎng)頁設(shè)計者只需要提供一張高清的圖片，然后就不需要擔(dān)心它是否能夠適應(yīng)各種設(shè)備了，因為sencha會替你做這個resize的工作。

這樣做的缺點也是顯而易見的，即圖片經(jīng)過了第三方服務(wù)器，效率上肯定受到影響。并且這是境外服務(wù)，不一定會支持國內(nèi)的多數(shù)國產(chǎn)手機(jī)。不過國人倒是可以開發(fā)一個類似的web服務(wù)來為國內(nèi)圖片做resize。

4.2 如何處理移動設(shè)備頁面中的地圖呢？

這個也很簡單，就是做一個之前我們提到的邏輯判斷，當(dāng)屏幕小于一定尺寸時，就將map設(shè)為不可見。如：

同樣可以這樣處理的還有網(wǎng)頁頭部大大的banner！


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”。就是說RWD的設(shè)計應(yīng)該從mobile的版本開始，慢慢往上增加復(fù)雜性。

Very small screens（很早前的nokia和藍(lán)莓手機(jī)等）：

使用最基本的HTML、最簡單的布局、很小圖片、有限的css和js

Small screens（智能手機(jī)：iphone等）：

如果手機(jī)支持的話可以增加HTML5特性、簡單的布局、較小的圖片（比very small screen的大一些）、更多的CSS和js

Medium screens（ipad、tablet之類的）

由于有了更多的空間，因此可以考慮增加可選的內(nèi)容，比如側(cè)邊欄什么的?？梢允褂枚鄼诓季?。可以使用較大的圖片。

Large screens（如桌面顯示器、電視等）

可以使用寬屏的布局（如三欄或四欄等）、使用大的圖片。對于電視用戶，要考慮優(yōu)化導(dǎo)航，因為用戶可能是站在10英尺外遠(yuǎn)程控制頁面。

5.2 Progressive Enhancement

Progressive Enhancement將web設(shè)計視為不同的層次。

第一層是結(jié)構(gòu)內(nèi)容，這一層將決定網(wǎng)頁的基本結(jié)構(gòu)和內(nèi)容，如果設(shè)計停留在這一層，那么幾乎所有的設(shè)備都可以打開你的頁面。

第二層和第三層是CSS和JS，你無法保證所有的設(shè)備都支持這些特性，但若支持，那么用戶將獲得良好的體驗。

很多年來，web開發(fā)者們都在前衛(wèi)的瀏覽器上開發(fā)web應(yīng)用，而忽略了那些使用舊版本瀏覽器的用戶。（這一情況好像國內(nèi)不是很嚴(yán)重，大家還是很照顧老瀏覽器用戶的）。Progressive Enhancement的設(shè)計理念則是反過來，重視內(nèi)容，然后再往上增加用戶體驗。在設(shè)備不支持的情況下，至少可以保證頁面內(nèi)容的可達(dá)性。

5.3 content-first design

Mobile-first Responsive Web Design和Progressive Enhancement有時又被稱為content-first design，這是因為它們都十分重視內(nèi)容的重要性，并將其排在設(shè)計的第一位。一個很好的content-first 應(yīng)該在網(wǎng)頁裸奔的情況下信息組織也井井有條。

總結(jié)：

　　想要移動端的web頁面有好的性能表現(xiàn)需要從許多方面進(jìn)行改進(jìn)。首先是我們的設(shè)計理念，應(yīng)該重視內(nèi)容的選擇和組織排列。其次，對于會降低頁面加載速度的因素能避免的盡量避免（比如過多的http請求），不能避免也也要盡量優(yōu)化（如圖片縮小和地圖隱藏）。最后，最重要的還是設(shè)計師的意識。追求美觀、炫目的設(shè)計并不能給用戶帶來最好的用戶體驗。最好的用戶體驗應(yīng)該建立在響應(yīng)速度的基礎(chǔ)上，在保證速度的基礎(chǔ)上才有可能談美化。

最新評論