文档章节

响应式不是万能的!教你提升响应式设计的移动性能

lotozhou
 lotozhou
发布于 2015/11/24 09:27
字数 2033
阅读 57
收藏 2
点赞 0
评论 0

你调整了浏览器,笑容攀上脸颊。你感到非常开心,认为自己实现了友好移动的目标。在正式讨论前,让我来预测下未来:你会失掉用户和经济效益,如果你把响应式网页作为唯一目标和唯一的解决办法。

好消息是,你可以改善它。

在这篇文章中,我们会谈到移动互联网和响应式设计的关系,首先将介绍如何巧妙的运用响应式设计,为什么性能对移动端非常重要,为什么响应式设计不能作为你网站的目标,最后技术的性能问题帮助我们更好的理解这问题。

自2000年开始,设计者和开发者就把移动设备的问题过于简单化,以至于现在仍然有人认为响应式网页设计能解决一切问题。

大家必须明白,凌驾于任何目标,移动网络体验必须和闪电一样快。迅速、实用、兼容的体验对所有移动设备都是挑战。当你使用响应式设计时,这些挑战都存在。从一开始就重视性能会让过程容易些。

响应式设计是很棒,但不是万能钥匙。如果你在移动设备上一味坚持,在转换率后就可能隐藏着性能问题。大约有11%的网站是响应式,这个数字每月都在增长,所以现在是谈论这个问题的时机了。

据Guy Podjarny研究,72%的响应式网站不分屏幕大小都提供相同的字节,尽管这会降低移动网络连接。不是所有用户都有耐心等着网站加载。

对响应式设计存在的问题有了基本认识,我们就能减低它带来的损失。

移动网站来自过去

我不是说你不应该采用响应式设计或者去用m.*的子域名。事实上,现在社会分享无处不在,不分设备,分配给给文档一个URL,这是聪明的做法。但这并不意味着一个单独URL应该提供相同的文档或每一个设备都应该下载相同的资源。

援引Ethan Marcotte的话,他创造了“响应式网页设计”这个术语。

最重要的是,响应式网页设计的初衷不是要取代移动网页。——Ethan Marcotte

交互、移动、快速

如果我们能使用一些其他的技术,就可以实现获得响应式设计好处的同时,不影响移动设备的性能。响应式设计从来不是意味着要解决“性能”,这也是为什么我们不能因此指责它的原因。然而,相信它能解决你所有问题,这大错特错。

设计响应式很重要,因为我们需要解决跨桌面和移动端视窗大小范围的问题。但是只考虑屏幕大小就低估了移动设备。桌面和移动端的界限正在变得模糊,基于不同的设备对我们而言仍然有多种可能性。但是我们还不能通过媒体查询来决定响应式设计的功能。一些评论家称之为“可靠的响应式网页设计”,然而另一些人则认为它是伴随现代视觉的响应式网页设计。在没有了解其基本语义的情况下,我们需要搞清楚这个问题。

虽然没有可应用于各类文档的万全之策,但是能够运用一些技巧来改善现有响应式的解决办法,并且力求性能最大化。

  1. 实现每一个文档对所有的设备都使用相同的URL和相同的内容,结构不必要相同。

  2. 当从零开始,遵循“移动先行”的方法。

  3. 在一个真实设备上测试当资源加载和显示会发生什么。不要依赖调整你的桌面浏览器。

  4. 使用优化工具测量和提高性能。

  5. 通过JavaScript传输响应图片,虽然我们更期盼着浏览器供应商(例如srcset)能解决这个问题

  6. 当你需要当前设备具备加载条件时,只加载JavaScript,这会在onload事件之后发生。

  7. 对移动设备,内联文档的原始视图,或者发送一屏显示内容。

  8. 使用下面一种或几种技术应用智能响应式的解决方案:条件加载、按组响应、服务器端层(如适应性方法)。

条件加载

不要总是在CSS中依赖media queries,因为浏览器将会为所有设备加载和解析所有选择器和样式 (后面详细讨论)。这就意味着手机为了一个大屏要下载和解析CSS。因为CSS块的呈现,你要浪费一些时间等待联接成功。

在设备上用JavaScript的matchMedia查询来代替CSS media queries,你知道这些内容是不会变化的。例如,大家都知道iPhone不能动态的转换成iPad的规格,所以我们只在正在需要CSS时才用。

可以用特征检测,例如 Modernizr,对UI和功能性做出更明智的决定而不是仅仅根据屏幕尺寸。

按组响应

在处理简单文档、为台式电脑和智能手机提供相同的HTML时,虽然为我们可以让所有屏幕依赖一个单一的HTML基础和响应式设计,但这并不总是最好的解决方案。为什么呢?同样是由于移动设备的性能。

即使我们在服务器端储存相同的文档,但是根据设备组别的不同给用户不同的文档。举个例子,为一个6英寸甚至更大的屏幕提供大的浮动菜单,为一个小屏幕提供汉堡菜单。在每个组群里,使用响应时技术以适应不同的场景,例如肖像模式和风景模式的转换,切换iPhone(320像素宽)、5英寸Android设备(360英寸)和平板(400像素)。

服务器端层

智能响应策略的最后一个选择是服务器。

服务器端功能检测和决策不是移动网络的新鲜玩意。类似 WURFL 和Device Atlas的库在市场上有好多年,响应式设计和服务器组件的混合也众所周知。有时被称为是响应式设计和服务器端组件(RESS),有时又叫自适应设计,这提高了响应式设计的速度和可用性,同时每一个服务器端都保持一个代码库。

很遗憾的是。这些技术这几年并没有什么突破性的发展。只能在博客和杂志里看到一些开发者对“RESS”、“响应式”、“自适应”做比较。原因就是:我们是前端专业人士。任何涉及到服务器的事情看起来都是不太愉快的问题。在一些情况下,前端设计师能把握好服务器的脚本,另一些情况是,服务器由远程开发团队管理,设计师不想每做一次小的UI改变就要和远程团队沟通处理。我能体会这种感觉。

这就是在大型项目中要花时间思考新架构层的原因,这样前端工程师对服务器做决定时不会影响到后端架构。Node.js是一个极好的备选平台,是介于当前企业后端基础和前端之间的服务器端层。

在这个新的端层里,前端的工程师可以根据有现实的决定权,这会使得在不触及后端架构的情况下,让所有设备上的体验更为快速、响应、可用。


© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
响应式Web设计(一):响应式Web设计的背景

  不是专业前端,可2011年底至今大部分时间在做着一个前端开发工程师的事情,所以多少也有点总结,多少也有点“经验”和分享。 响应式Web设计不是我首创的概念,早就有了,我这里只不过把自...

幸福2胖纸
2013/05/04
0
4
谈谈从 PC 端到移动端的产品设计差异

对于PC与移动客户端(App)的设计有何差异? 企业App研究 随着移动互联网时代的到来,移动端的产品越来越受到重视。在规划产品时,往往会把PC端和移动端的产品放在同等重要的地位进行思考。响应...

oschina
2013/06/17
2K
7
PrimeFaces 5.3 发布,JSF 开发框架

PrimeFaces团队很自豪地宣布5.3版本PrimeFaces正式发布。有235处改进、新的和重新编写的组件,大大提高了响应式设计的功能、辅助功能增强等。 响应式(Responsive)设计 5.3将主要焦点放在提升...

ratking
2015/10/20
2.6K
16
译者序

“不是我不明白,这世界变化快。”崔健的这首歌使用在互联网领域最合适不过。只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临。人们已经习惯将越来越多的时间花在各种移动...

无敌西瓜
2014/05/30
0
0
响应式Web设计(二):响应式Web设计的概念

  首先感谢大家对第一篇背景介绍一文的支持,今天将对响应式Web设计的概念进行一个大概的介绍,当然这一篇也不是什么干货,只是作为一个主题来说,概念的介绍必不可少,下一篇就应该有点干...

幸福2胖纸
2013/05/04
0
10
五个超重要的移动web内容适应设计理念

  【IT168技术】如果你要构建移动网站,那么本文可以帮你选择合适的技术方案。本文并没有描述具体如何去开发,只是介绍应该如何选择正确的方法。在开始之前我们有必要明确一下这次实践的目...

webapptrend
2012/04/09
0
0
前端每周清单第 34 期:Vue 现状盘点与 3.0 展望,React 代码迁移与优化,图片优化详论

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
2017/10/09
0
0
web前端响应式设计总结

一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈到...

ouven
2016/01/17
3.6K
2
10款帮助你设计超酷响应式布局的jQuery插件

日期:2012/02/24 来源:GBin1.com 如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说,今天的设计者需要...

gbin1
2012/02/25
8.1K
2
响应式和函数式,两个容易混淆的概念

响应式(Reactive Programming,简称RP) 在计算机中,响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将...

fengzhizi715
2017/11/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

大数据基础知识,大数据学习,涉及的知识点

一、什么是大数据 一种规模大到在获取、存储、管理、分析方面大大超出了传统数据库软件工具能力范围的数据集合,具有海量的数据规模、快速的数据流 转、多样的数据类型和价值密度低四大特征。...

董黎明
11分钟前
0
0
Linux CentOS 7上安装极点五笔

话说几天前在新买的惠普笔记本上成功地安装了Linux CentOS 7操作系统、Nvidia Quandro P600驱动程序及X Window,并在VMware下安装Red Hat教学环境,彻底跳出Windows的苦海,但仍然有一件事不...

大别阿郎
23分钟前
0
0
2018年7月20日集群课程

一、集群介绍 集群,简单地说是指一组(若干个)相互独立的计算机,利用高速通信网络组成一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服务器。 ...

人在艹木中
26分钟前
0
0
spark开发机中调试snappy

目的 在Idea中的点击运行,使spark可以直接读取snappy 自己编译hadoop,以支持snappy的压缩。 自己编译的目的就是要得到支持snappy文件读写的动态链接库。如果可以在网上下载,可以跳过自行编...

benny周
43分钟前
0
0
centos7 安装docker

1,查看系统版本 cat /etc/redhat-release 2,安装gcc yum -y install gccyum -y install gcc-c++ 3,卸载旧版本 yum remove docker \ docker-client \ ......

暗中观察
44分钟前
0
0
rabbitmq学习记录(七)交换机Exchange-topic

实现功能:一条消息发送给多个消费者 交换机模式:topic 相比于direct匹配模式,匹配routingKey时,topic模式下不仅支持完全匹配,还支持两种特殊的匹配方式 #:可以匹配一个或多个字符 *:可...

人觉非常君
44分钟前
0
0
[译]为什么(要使用)GNU Affero GPL?

#为什么(要使用)GNU Affero GPL? 作者信息:Copyright © 2010, 2013, 2014, 2015 Free Software Foundation, Inc. This page is licensed under a Creative Commons Attribution-NoDeriv......

ICE冰焰火灵X
45分钟前
0
0
apollox-lua 示例

这个项目是从openn2o里迁出的项目。 示例地址 apollox-lua.js 是把js翻译成lua的库。支持两种不同的模态, 在编译工程的时候使用 可以用作openresty的代码翻译, 即用js代替lua。在web模式可...

钟元OSS
55分钟前
0
0
Ubuntu系统笔记 Linux系统

Ubuntu 16.04.3 Ubuntu系统,不适用yum, yum软件源都是RPM软件包,不是deb格式软件包,所以你即便是在Ubuntu上面安装了yum,也是完全用不了的。 不推荐 apt好于yum apt install screen...

阿锋zxf
57分钟前
0
0
Java面试中,遇到这类面试题最吃亏!

从你接触 Java开发到现在,你对 Java最直观的印象是什么呢?是它宣传的 “Compile once, run anywhere”,还是目前看已经有些过于形式主义的语法呢?你对于 Java平台到底了解到什么程度?请你...

Java大蜗牛
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部