響應式WEB設計學習(3)―如何改善移動設備網頁的性能

前言

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

本文目錄：

1、桌面網頁的性能檢測

2、移動設備中網頁的性能檢測

3、移動設備網頁的性能瓶頸

4、如何改善移動設備網頁的性能

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

正文

1、桌面網頁的性能檢測

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

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

（正在加載網頁組件……）

加載完以后會出來一個分析結果：

可以看到給出來的分數是D級，62分。

YSlow有一套檢驗頁面性能的標準，它會根據標準里面的每一條來檢測這個網頁，并且根據情況對該網頁給出評級和建議。如新浪首頁得到的評級和建議分別是：

我們來看看其中的第一條，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文件很多，這會導致很多的HTTP請求。過多的HTTP請求會降低網頁的加載速度。

再來看看新浪得到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.

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

2、移動設備中網頁的性能檢測

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

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

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

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

輸入好參數后點擊

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

結果出來后，會摘要性地顯示這個web頁面的平均加載時間和大小：

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

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

可以查看一下統計信息

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

現在再用它來試試用移動設備瀏覽器打開正常的新浪首頁會發生什么：

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

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

可以看到頁面請求先被發送到了一個PWS服務器（微軟推出的個人web服務器）上，然后該請求被重定向（狀態碼302）至另一個地址（http://sina.cn）。這些不是關鍵，看到下面的Request頭部中，user-agent給出了發出這個請求所在的設備以及該設備運行的操作系統類型?？梢圆孪胄吕司褪抢昧诉@個信息來做判斷，以提示用戶轉用觸屏版的sina。

3、移動設備網頁的性能瓶頸

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