如何在响应式基础上提升移动性能///响应式不是万能的!教你提升响应式设计的移动性能(一)

如何在响应式基础上提升移动性能

摘要:如何在响应式基础上提升移动性能,从细节做起,结合网站,做好响应式页面的设计优化工作.,随着互联网的高速发展,合肥网站建设小编今天为大家介绍,为解决移动性能的响应式页面设计并不是万能的,而应该不断的改进,从而更好的为用户服务.
随着互联网的高速发展,例如近段时间炒得火热的谷歌申请的无人机技术,以及电商门户网站阿里巴巴的上市等等,这都促进了互联网日新月异的变化。

所以作为网站seo人员不应固步自封,而应该努力的跟上时代的步伐,不仅需要学习相关的seo知识,而且对于网站的制作相关过程也应该做相应的了解,以便更好的为网站优化做准备。合肥网站建设小编今天为大家介绍,为解决移动性能的响应式页面设计并不是万能的,而应该不断的改进,从而更好的为用户服务。

智能手机的发展,促使了响应式页面的出现,这对于前段时间话题360新推的Urlink,对网站建设的利与弊,有很大的冲击。所以响应式页面一直受到广大网络公司的欢迎和使用,同样在设计响应式页面的网站时,存在的问题以及挑战一直存在。

目前对于市场中大部分11%的网站采取的是响应式网页设计,据专业研究Guy Podjarny显示,这其中有72%的响应式网站,在不同屏幕大小的移动性能设备中,都会提供相同的字节,这样导致直接的结果是因不同屏幕移动设备,影响到用户的加载速度。

我们明白到响应式页面存在的不足,并不是说响应式页面就不可取,这是一种错误的理解。我们需要的是与移动性能设备相互促进影响的响应式页面,从而更好的为用户服务,已达到更加的智能化。我们可以采取的相关措施,如下:

1,在相同的URL使用的文档中,可以采取相同的内容,对于网站设计的结构可不一样。

2,响应式页面的使用并不是要取代移动页面,所以要遵循移动先行的方案。

3,在决定使用响应式页面的时,需要在相关的真是移动设备中进行测试,已记录会发生的一些问题与不足,从而及时的采取解决方案。

4,对于不同浏览器所浏览到的页面也会是不一样的,所以对于设计好的响应式页面需要使用优化工具,以便更好的进行测量,为提高相关性能做准备。

5,在图片设计中,需要通过JavaScript传输,以便在用户浏览网站的时候,加载不会受到影响。

6,对于不同的移动设备,我们需要考虑的是用户在浏览时,需要做好相关的响应式解决方案,例如条件加载,在服务器端解决方案等等。

综上所述,为使网站在移动性能设备中更加快速的发展,需要网站建设设计以及优化人员共同的努力,从而更好的促进响应式页面在用户中更好的使用开来。这提高了响应式设计的速度和可用性,同时每一个服务器端都保持一个代码库。
----------------------------

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

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

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

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

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

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

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

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

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

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

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

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

交互、移动、快速

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

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

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

实现每一个文档对所有的设备都使用相同的URL和相同的内容,结构不必要相同。
    当从零开始,遵循“移动先行”的方法。
    在一个真实设备上测试当资源加载和显示会发生什么。不要依赖调整你的桌面浏览器。
    使用优化工具测量和提高性能。
    通过JavaScript传输响应图片,虽然我们更期盼着浏览器供应商(例如srcset)能解决这个问题
    当你需要当前设备具备加载条件时,只加载JavaScript,这会在onload事件之后发生。
    对移动设备,内联文档的原始视图,或者发送一屏显示内容。
    使用下面一种或几种技术应用智能响应式的解决方案:条件加载、按组响应、服务器端层(如适应性方法)。

条件加载

不要总是在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是一个极好的备选平台,是介于当前企业后端基础和前端之间的服务器端层。

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

时间: 2024-08-07 21:18:22

如何在响应式基础上提升移动性能///响应式不是万能的!教你提升响应式设计的移动性能(一)的相关文章

【linux基础】17、TCP/IP网络基础(上)

一.计算机网络概述 1.什么是网络? 一群具有独立功能的计算机组成的系统通过通信设备及传输媒体互连起来,在通信软件支持下,实现资源共享.信息交换的整个系统 产生计算机网络的基本条件:通信技术与计算机技术的结合 2.计算机网络的产生与发展 1954年 主机-终端的通信网络  第一代计算机网络 以单个主机为中心.面向终端设备的网络结构.系统中除主计算机具有独立的数据处理功能外,系统中所连接的终端设备均无独立处理数据的功能 1969年 主机-主机的通信网络  ARPANET网  第二代计算机网络 以分

Spring基础-上-概念篇

*什么是IoC(Inversion of Control)? 即控制反转.其思想是控制资源获取的方向.传统的资源获取的方式为向容器发起请求,然后容器返回资源,而应用了IOC之后,容器主动地将资源退送给它所管理的组件,组件要做的仅仅是选择一种合适的方式来接收资源即可. 买菜的例子. *什么是DI(Dependency Injection)? 即依赖注入.通常来讲,一个复杂的应用需要多个类相互协作,譬如类A要实现功能A需要类B的协作,那么类A就是依赖于类B,传统的做法是在类A的内部直接创建B的对象,

(2)https:http的基础上用SSL或TSL加密

加密过程具体TCP实现 步骤 1 : 客户端通过发送Client Hello报文开始SSL通信(这里是在TCP的三次握手已经完成的基础上进行的).报文中包含客户端支持的SSL的指定版本.加密组件列表(所使用的加密算法及密钥长度等). 步骤 2 : 服务器可进行SSL通信时,会以Server Hello报文作为应答.和客户端一样,在报文中包含SSL版本以及加密组件.服务器的加密组件内容是从接收到的客户端加密组件内筛选出来的. 步骤 3 : 之后服务器发送Certificate报文.报文中包含公开密

【G】开源的分布式部署解决方案(二) - 好项目是从烂项目基础上重构出来的

G.系列导航 [G]开源的分布式部署解决方案 - 预告篇 [G]开源的分布式部署解决方案(一) - 开篇 [G]开源的分布式部署解决方案(二) - 好项目是从烂项目基础上重构出来的 分析目前项目结构 眼前出现这么一坨坨的文件夹,相信很多人已经看不下去了.是的,首先就是要把它给做掉. 按照这个项目文件夹的命名意图,大概可以划分如下: 1.Business:业务代码 2.Data:数据访问 3.Helpers:辅助类(通用类库之类的) 4.Models:各种模型(包括视图模型) 5.theme:皮肤

最佳的项目一定建立在最佳的软件工程基础上的

快速软件开发有几个基本原则:管理原则.技术原则.质量保证原则. 其中和我目前关系较深的是技术原则. 作者在第四章的前段便引用了这句话“最佳的项目一定建立在最佳的软件工程基础上的”. 而我认为我计算机相关的基础都比较薄弱,作者并没有给出软件工程基础相关的推荐书籍. 不知道是否有一些软件工程基础的推荐书籍. 最好是能够相互对照的.

【转】Android 工程在4.0基础上混淆

Android现在对安全方面要求比较高了,我今天要做的对apk进行混淆,用所有的第三方工具都不能反编译,作者的知识产权得到保障了,是不是碉堡了. 一,首先说明我这是在4.0基础上进行的. 先看看project.properties 这个文件. # This file is automatically generated by Android Tools. # Do not modify this file -- YOUR CHANGES WILL BE ERASED! # # This file

正則表達式基础及java使用

正則表達式基础 正則表達式语法(1) 普通字符:字母,数字.汉子,下划线以及没有特殊定义的标点符号都是"普通字符".表达式中的普通字符.在匹配一个字符串的时候,匹配与之同样的一个字符 简单的转义字符: \n :代表换行符 \t :代表制表符 \\ :代表\本身 \^ ......  :代表匹配这字符本身 正則表達式语法(2) 标准字符集合: 可以与多种字符匹配的表达式 注意区分大写和小写,大写是相反的意思 \d :随意一个数字,0-9中的随意一个 \w:随意一个字母或者下划线或者汉字.

.net在当前日期的基础上加一天

比如今天是:2015-11-10 18:57:01,在这个基础上加一天,那么就是2015-11-11 18:57:01,代码如下: DateTime now_dt = DateTime.Now; string now_days=now_dt.AddDays(1).ToString(); 假如你需要的是这种格式的话 2015-11-11 00:00:00,代码如下: DateTime now_dt = DateTime.Now; string now_days=now_dt.AddDays(1).

Swing是在AWT基础上的扩展

JFrame组件import java.awt.Color;import javax.swing.JFrame; import javax.swing.JPanel;/* * Swing是在AWT基础上的扩展  * javax.swing包及其扩展包,组件的命名多以J开关  *  * JFrame组件  */ public class Test08 {    public static voi... http://ask.360kad.com/question/166093.htmlhttp:/