响应式web设计的优化
在响应式网页的设计过程中,其中也会涉及到一些用户体验方面的问题和弊端,需要进一步的优化。
(1)减轻Javascript库负载
对于移动端来说,jQuery表现的太过厚重,而现在针对移动端的状态来说,有jQuery Mobile、YUI、XUI等可供选择的框架。
(2)减少HTTP请求次数
移动端相比较PC端有一个特殊的限制需要考虑到,就是用户的网络流量是有限的。这时候针对这些页面内部的部分操作,可以使用Ajax异步请求来完成,针对短期内不会变化的一些数据,可以使用服务器端缓存、前端缓存等机制来保存这些数据,这样可以减少用户一定的数据请求量。
(3)Javascript和CSS需要尽量压缩
把页面中使用的Javascript和CSS进行压缩之后会有效地减少页面大小。
(4)用CDN管理页面资源
CDN的即内容分发网络,意在尽可能避开互联网上有可能影响数据传输速度和稳定性的环节,使内容传输的更稳定。
(5)列表图片实现“懒”加载
移动终端设备因为屏幕大小有限,没有必要将全屏中的图片一次性加载完成,网页加载的同时,我们可以选择逐个加载,当用户进行滑动页面的时候,再继续加载图片。
(6)图片显示的优化处理
根据用户设备的分辨率来加载不同分辨率下的不同图片,这样既能给不同终端的用户一个很好的视觉体验,又不会白白浪费用户的网络数据流量。
响应式web设计的优化的更多相关文章
- 响应式WEB设计的9项基本原则
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
- 什么是响应式Web设计?怎样进行?
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 十大响应式Web设计框架
http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意 ...
- 响应式WEB设计
近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...
- 响应式WEB设计的基本原则大总结
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
- HTML5、CSS3与响应式Web设计入门(1)
HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...
- 响应式Web设计与CSS(上)
1.一个例子 响应式Web设计最核心的一点,就是可以适配不同视口大小的流式布局. 1.1 简单上手 <div class="row"> <header class ...
- 最佳的 14 个免费的响应式 Web 设计测试工具
一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
随机推荐
- [妙味JS基础]第十二课:数组随机、数组去重
知识点总结 json var json={'name':'abc'} 属性加分号为安全的写法 json: 只能用for in 数组:for和for in 都可以使用 json没有length和下标 数 ...
- javascript基础(一)变量
原文http://pij.robinqu.me/ 预定义的全局变量 arguments encodeURI Infinity Array encodeURIComponent isFinite Boo ...
- POJ 1740 A New Stone Game(多堆博弈找规律)
传送门 //有n堆,AB轮流从n堆的一堆中移任意个,可以扔掉,也可以移给其他堆中的一堆 //最先移完的胜 //如果n堆中两两堆数目相等,那肯定是B胜 //但只要有非两两相同的,如xyz,A先, //A ...
- Infix expression 计算 without '(' and ')'
#include<iostream> #include<stack> #include<string> using namespace std; char comp ...
- delphi edit 中undo 和clearundo 复制粘贴等总结
edit 和memo都有undo功能, Undo:恢复到改动前. ClearUndo:撤销掉Undo缓冲区的内容,则将无法恢复到改动前的 从该文本框的撤销缓冲区中清除关于最近操作的信息,根据应用 程序 ...
- Leetcode 073 Set Matrix Zeroes
Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. click ...
- poj 1142 Smith Numbers
Description While skimming his phone directory in 1982, Albert Wilansky, a mathematician of Lehigh U ...
- CreateProcess注意的几个地方
1.CreateProcess失败,GetLastError返回998,应该是最后两个参数没有初始化导致的. 2.要使外部程序隐藏窗口运行,需要将STARTUPINFO的dwFlags指定为START ...
- Openjudge-计算概论(A)-求平均年龄
描述: 班上有学生若干名,给出每名学生的年龄(整数),求班上所有学生的平均年龄,保留到小数点后两位. 输入第一行有一个整数n(1<= n <= 100),表示学生的人数.其后n行每行有1个 ...
- MyBatis 多表联合查询,字段重复的解决方法
MyBatis 多表联合查询,两张表中字段重复时,在配置文件中,sql语句联合查询时使用字段别名,resultMap中对应的column属性使用相应的别名: <resultMap type=&q ...