如何在响应式基础上提高移动性能///响应式不是万能的！教你提高响应式设计的移动性能（一）

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

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

因此做为网站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是一个极好的备选平台，是介于当前企业后端基础和前端之间的服务器端层。

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