响应式WEB设计学习(3)―如何改善移动设备网页的性能

2024-08-30 08:34:59

字体：大中小

来源：转载

供稿：网友

前言

移动设备由于受到带宽、处理器运算速度的限制，因而对网页的性能有更高的要求。究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢？这些元素应该做何处理以提升页面在移动设备中的整体性能？是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢？

本文目录：

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、移动设备网页的性能瓶颈

分析了若干个页面统计，基本上都类似于下列分布：