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

(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. HTML5 中的新特性:

    一,用于绘画的 canvas 元素,<canvas>标签替代Flash Flash给很多Web开发者带来了麻烦,要在网页上播放Flash需要一堆代码和插件.<canvas>标签 ...

  2. POJ 2305 Basic remains(进制转换)

    题目链接:http://poj.org/problem?id=2305 ime Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5326 ...

  3. JS复习:第六章

    创建对象 一.工厂模式 function createPerson(name,age,job){ var o = new Object(); o.name = name; o.age = age; o ...

  4. POJ 2209 The King#贪心

    (- ̄▽ ̄)-*  水 //水题:潜力^e为正数(e为2时都可以)的儿子都可以去上战场了, //英文要看懂,exponent指数,不超过3的正数 #include<iostream> #i ...

  5. Java IO 过滤流 BufferedInput/OutputStream

    Java IO 过滤流 BufferedInput/OutputStream @author ixenos 概念 BufferedInput/OutputStream是实现缓存的过滤流,他们分别是Fi ...

  6. OpenCL( 一)

    #include <CL/cl.h> #include <iostream> #include <string> #include <fstream> ...

  7. Excel教程(2) - 函数的参数

    函数右边括号中的部分称为参数,假如一个函数可以使用 多个参数,那么参数与参数之间使用半角逗号进行分隔.参数 可以是常量(数字和文本).逻辑值(例如 TRUE 或 FALSE).数 组.错误值(例如#N ...

  8. Dot Product

    These are vectors: They can be multiplied using the "Dot Product" (also see Cross Product) ...

  9. CSS 背景 background 讲解

    背景语法:background: background-color || background-image || background-repeat || background-attachment ...

  10. 【VMware】VMware Workstation中虚拟机网络配置

    一直用的vmware的虚拟机以及UVP还有cirtix的虚拟机,然后对vmware workstation却一窍不通,这个怎么了得,下面介绍一下我学习中遇到的问题及解决办法. 一.准备工作: vmwa ...