响应式Web设计（四）：响应式Web设计的优化

这篇文章主要说说在进行响应式Web设计的过程中，涉及到页面的一些需要进行优化的地方：

1、  轻量级的Javascript库：

针对PC端网页当然会首选jQuery来作为前端javascript库，但是针对移动端来说，jQuery太重，而现在针对移动端来说，有很多优秀的框架可供使用，jQuery Mobile、YUI、XUI等是不错的框架，但是个人比较倾向于zepto。不过zepto预定义的一些事件，比如触屏滑动的swipe事件，在ios上完美支持，但是在android上，有些浏览器确实不支持的，这时候就需要寻求与一些第三方的javascript插件库，好在现在网上有很多优秀的第三方javascript插件库可供使用，所以各位按需索取吧。

 

2、  减少HTTP请求次数：

一个页面的初始加载使用HTTP请求来操作，没有任何问题，但是页面中比如翻页、筛选之类的操作，如果再使用完整的HTTP请求来处理的话，会加大网络传输的数据量，因为移动端有一个特殊的限制，就是用户的网络流量是有限的，超过之后会要交钱的。这时候针对这些页面内部的部分操作，可以使用Ajax异步请求来完成，针对短期内不会变化的一些数据，可以使用服务器端缓存、前端缓存等机制来保存这些数据，这样可以减少用户一定的数据请求量。

 

3、  压缩Javascript和CSS：

把页面中使用的Javascript代码和CSS代码进行压缩之后会有效地减少页面大小。

在线的Javascript代码压缩工具和在线CSS代码压缩工具有很多，而我在开发中会使用下面这两个：

Javascript压缩：http://www.jscompress.com/

CSS压缩：http://www.csscompressor.com/

 

4、  使用CDN来管理页面资源：

CDN的全称是Content Delivery Network，即内容分发网络。其基本思想是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

我们可以把一个页面上使用的外链的Javascript文件、CSS文件、固定的ICON图标和图片放在CDN上，这样在访问网页的时候可以使用户可就近取得这些资源，解决网络拥挤的状况，提高用户访问网页的相应速度。

 

5、  列表图片实现“懒”加载：

移动终端设备因为屏幕大小有限，没有必要将全屏中的图片一次性加载进来，在网页加载的时候，我们可以选择只加载一个可视屏幕中的图片，当用户进行滑动页面的时候，再加载后续剩下的图片。

这个方案其实就是现在大家都说的图片延迟加载技术，只是我们同事在开发的过程中戏称为图片的“懒”加载，其实说到底是按需加载。比如你用淘宝搜索产品，你的移动设备一屏其实只能显示5张图片，那在页面初始加载的时候只加载5张图片，用户滑动页面的时候再加载5张图片，依此类推，这样用户滑到哪里就显示到哪里。

目前网上有一些优秀的延迟加载插件，不过我在具体开发过程中没有使用第三方插件，而是自己开发的一个插件来实现这种图片的“懒”加载，后续我单独介绍我开发的这个插件。

 

6、  图片显示的优化处理：

首先先说为什么响应式Web设计的时候我们要对图片的显示进行优化处理呢？比如说现在有一张图片，如果你用低分辨率的图片，在低分辨率上显示没有问题，但是在高分辨率机器上图片就会模糊不清，影响用户视觉体验。但是如果你一开始选用一张高分辨率的图片，这样虽然可以兼顾所有机器上的视觉体验，但是针对低端机器来说是很不公平的，因为这样会白白浪费用户的网络数据流量。

那我们应该如何处理呢？解决方法就是根据用户设备的分辨率来加载不同分辨率下的不同图片，这样既能给不同终端的用户一个很好的视觉体验，又不会白白浪费用户的网络数据流量。

 

①     针对分辨率、屏幕大小来优化图片的显示，这里介绍两种方法：

第一种，将页面<image>标签的src属性中使用适用于低分辨率的图片地址，而将其他中、高分辨率的图片地址使用HTML5的data-自定义属性来隐藏；然后通过Javascript来获取浏览器窗口的大小决定加载哪一张图片，用Javascript把<image>标签的src属性替换成所需要的data-自定义属性中的图片。

第二种：将加载的图片地址使用CSS样式来定义，然后通过Media Queries媒体查询机制来决定加载哪一张图片。

②     针对Retina屏幕做专门的图片优化，同样介绍两种方法：

第一种，将页面<image>标签的src属性中使用普通图片的地址，而将Retina屏幕使用的图片地址使用HTML5的data-自定义属性来隐藏；然后通过Javascript来判断Ratio大小决定是否加载Retina图片，如需加载使用Javascript把<image>标签的src属性替换成所需要的data-自定义属性中的Retina图片。

第二种：将加载的图片地址使用CSS样式来定义，然后通过Media Queries媒体查询机制来决定加载Retina图片，判断Retina屏幕的媒体查询机制代码如下：

@media only screen and (-webkit-device-pixel-ratio: 2) {

   // 设置Retina显示图片

}

 

7、  使用对SEO友好的标签：

为了让我们的网页能够让搜索引擎更好的收录，我们需要在我们的页面中尽可能低使用对SEO友好的标签，比如<h1>、<strong>、…等，关于页面标签的SEO友好化改造，后期我会专门发文介绍。

 

终于完成了响应式Web设计这一个系列的四篇文章，有朋友说我应该把东西写在一片博文里，没必要分开写，大有追连续剧的感觉，其实这个先说抱歉，但是允许我说一声，我平时的工作很繁琐，又不想因为这些事情来影响自己生活的乐趣，所以我只能一点一点的写。也许还有人说我这四篇博文中水货很多，那没有办法，因为关于响应式Web设计我不是原创者，我充其量算一个总结着，所以一些理论的东西我必须得参考别人的，我不寄希望于别来从我文章里面能学到多少，其实写这些技术文章，主要的是让自己对一些知识点做一个很好的总结，既然总结了，就想分享出来，也许质量很不好，但是我用心了，各位，按需索取吧。同时，我还是比较期待我个人的后续其他方面的总结和分享。