响应式Web设计的优化（转）

最新推荐文章于 2024-11-02 12:42:04 发布

weixin_33810302

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量206

点赞数 1

文章标签： javascript 前端移动开发 ViewUI

原文链接：http://www.cnblogs.com/JoannaQ/archive/2013/05/07/3064227.html

版权

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显示图片

}

③ 图片的自适应

布局实现自适应不难，那么图片怎么做到呢？也就是说我的一张图片，有什么方法可以让他在不同的设备上显示能根据屏幕大小自适应，处理这种效果有一个方法，如果你的web页面不会受到带宽宽的影响（不考虑性能），你可以先制作一图片让其适合最大屏幕，然后通过样式来控制不同设备下显示的大小；另外一种办法就是你可以为每个断点准备不同的图片。

图片自适应大小

使用样式来控制图片的自适应：

img {  max-width: 100%;}

断点图片

为每一个断点提供不同的的图片，这是一个比较头痛的事情，因为Medial Queries并不能改变图片"src"的属性值，那有没有办法可以解决呢？可以参考一下下面的解决方法：

使用background-image:给元素使用背景图片，
显示/隐藏父元素：给父元素使用不同的图片，然后通过Medial Queries来控制这些图片显示或隐藏。

一起来看一个断点解决图片自适应的例子：

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

@media (min-device-width:600px) {
  img[data-src-600px] {
    content: attr(data-src-600px, url);
  }
}

@media (min-device-width:800px) {
  img[data-src-800px] {
    content: attr(data-src-800px, url);
  }
}

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

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

转自：http://my.oschina.net/iamjiuye/blog/127995

转载于:https://www.cnblogs.com/JoannaQ/archive/2013/05/07/3064227.html