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

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

一、  轻量级的Javascript库：

针对PC端网页固然会首选jQuery来做为前端javascript库，可是针对移动端来讲，jQuery过重，而如今针对移动端来讲，有不少优秀的框架可供使用，jQuery Mobile、YUI、XUI等是不错的框架，可是我的比较倾向于zepto。不过zepto预约义的一些事件，好比触屏滑动的swipe事件，在ios上完美支持，可是在android上，有些浏览器确实不支持的，这时候就须要寻求与一些第三方的javascript插件库，好在如今网上有不少优秀的第三方javascript插件库可供使用，因此各位按需索取吧。

 二、  减小HTTP请求次数：

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

 三、  压缩Javascript和CSS：

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

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

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

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

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

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

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

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

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

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

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

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

首先先说为何响应式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显示图片

}

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

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

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