在响应式网页的设计过程中,其中也会涉及到一些用户体验方面的问题和弊端,需要进一步的优化。

(1)减轻Javascript库负载

对于移动端来说,jQuery表现的太过厚重,而现在针对移动端的状态来说,有jQuery Mobile、YUI、XUI等可供选择的框架。

(2)减少HTTP请求次数

移动端相比较PC端有一个特殊的限制需要考虑到,就是用户的网络流量是有限的。这时候针对这些页面内部的部分操作,可以使用Ajax异步请求来完成,针对短期内不会变化的一些数据,可以使用服务器端缓存、前端缓存等机制来保存这些数据,这样可以减少用户一定的数据请求量。

(3)Javascript和CSS需要尽量压缩

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

(4)用CDN管理页面资源

CDN的即内容分发网络,意在尽可能避开互联网上有可能影响数据传输速度和稳定性的环节,使内容传输的更稳定。

(5)列表图片实现“懒”加载

移动终端设备因为屏幕大小有限,没有必要将全屏中的图片一次性加载完成,网页加载的同时,我们可以选择逐个加载,当用户进行滑动页面的时候,再继续加载图片。

(6)图片显示的优化处理

根据用户设备的分辨率来加载不同分辨率下的不同图片,这样既能给不同终端的用户一个很好的视觉体验,又不会白白浪费用户的网络数据流量。

响应式web设计的优化的更多相关文章

  1. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  2. 什么是响应式Web设计?怎样进行?

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  3. 十大响应式Web设计框架

    http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意 ...

  4. 响应式WEB设计

    近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...

  5. 响应式WEB设计的基本原则大总结

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  6. HTML5、CSS3与响应式Web设计入门(1)

    HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...

  7. 响应式Web设计与CSS(上)

    1.一个例子 响应式Web设计最核心的一点,就是可以适配不同视口大小的流式布局. 1.1 简单上手 <div class="row"> <header class ...

  8. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  9. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

随机推荐

  1. magento数据添加

    1.第一种方法是一个字段一个字段地添加! $record = Mage::getModel('warehouse/record');      $record->addData($postDat ...

  2. 《JS权威指南学习总结--6.2属性的查询和设置》

    内容要点: 一.数组元素通过字符串索引而不是数字索引,这种数组就是我们所说的关联数组,也称散列.映射或字典. 二.继承 1.JS对象具有"自有属性",也有一些属性是从原型对象继承而 ...

  3. 2016年团体程序设计天梯赛-决赛 L1-2. I Love GPLT(5)

    这道超级简单的题目没有任何输入. 你只需要把这句很重要的话 —— “I Love GPLT”——竖着输出就可以了. 所谓“竖着输出”,是指每个字符占一行(包括空格),即每行只能有1个字符和回车. #i ...

  4. jQuery第五章

    jQuery对表单.表格的操作以及更多应用 一.表单应用 1.单行文本框应用 (1)获取和失去焦点改变样式 HTML代码如下: <form action="#" method ...

  5. js for...in 语句

    原文链接:http://www.w3school.com.cn/js/js_loop_for_in.asp for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作). 实例 ...

  6. jquery 实现 点击一个按钮添加多个div

    <script type="text/javascript"> var blockNum=10; $(document).ready(function(){ var p ...

  7. 2、为Eclipse绑定Tomcat

    1.window→preferences打开属性窗口 2.点击add 3.点击Tomcat6.0 点击next 4.选择tomcat的解压目录和jdk,并点击finish 5.点击ok 6.打开ser ...

  8. jquery之全选全不选

    <input type="checkbox" onclick="selall(this)" />全选/全不选 <input type=&quo ...

  9. 离线消息如何实现?-- ESFramework 4.0 快速上手(02)

    在ESFramework 4.0 快速上手一文中,主要介绍了如何使用ESPlus.Rapid命名空间中的引擎来快速地构建基于TCP的网络通信系统,即使是使用ESPlus.Rapid来进行ESFrame ...

  10. WTL中菜单栏及工具栏项状态改变应注意的地方

    WTL中菜单栏项和工具栏按钮的状态可通过UISetCheck(int ITEM_ID, int STATE)进行设置 需要注意的是要将需要改变状态的控件ID添加到UI更新映射中 /* MainFram ...