响应式设计与性能优化整合应对移动挑战

　　在当今的超级互联世界中，网络和移动应用程序的性能在推动客户的采纳和参与方面发挥着前所未有的关键作用。终端用户有着非常高的期望值，包括更快的页面加载速度，更丰富、更引人入胜的网络体验和应用程序。

　　与此同时，移动是快速发展的全球性现象，无论是业务、信息还是娱乐，移动正在改变我们与内容互动的方式——。因此，通过快速高质量的网络体验与移动用户进行互动的能力成为一项业务要求，以及成功的首要条件。如果忽视移动用户的需求，就有可能损失很大一部分、甚至越来越多的业务。

　　响应式网页设计采用正在迅速增长

　　然而，在这个美好的新世界提供快捷优质的体验并不容易，需要面临跨越不同浏览器、屏幕尺寸、网络和设备来优化性能的挑战。因此，企业寻求能够同时适用于每种设备的技术，这一过程使响应式网页设计(RWD)应运而生。

　　响应式网页设计是一种网页开发方法，指网页能够应响应载入的环境(主要是屏幕尺寸)并相应地更改用户界面。这种技术包括一系列灵活的网格和布局组合、图片以及对CSS3媒体查询的智能运用。RWD页面包含了展示所有版本的网站，包括移动和桌面视图在内所需的HTML。CSS和JavaScript会在浏览器中运行，并会隐藏或修改内容，以适应屏幕尺寸。

　　RWD的使用与日俱增，一个原因就是RWD可在每次有新移动设备类别进入市场时，免于重新设计和开发。

　　如前所述，采用RWD战略听上去像是一个理想的解决方案。但是，它并不是改进移动用户体验的杀手锏。事实上通过RWD网站成功与移动用户进行互动并不总是那么容易。随着移动设备变得更强大，网络变得更快、更加一致，移动终端用户的期望值也会随之增长。

　　提供快速优质的网络体验并不容易

　　如果RWD不是万能的，那么这类网站面临的分发挑战又是什么呢?在最近对RWD网站组成及其对网络性能影响所做的调查中，347个 RWD网站在不同的屏幕分辨率上进行了测试，并且对比了在每种分辨率上下载每个页面所需的字节数。调查结果显示，72%的RWD网站在不同的屏幕分辨率上的尺寸都大致相同，22%的网站只是稍微小一点。

　　同样重要的是，不仅大部分页面会在不同的设备上提供相同的payload，并且相同的有效荷载也与页面内容更多的总体趋势保持一致(平均页面大小接近1.2MB)。

　　RWD开发页面带来的一个更大更复杂的挑战是它们必须交付到终端用户的浏览器上，随后这些浏览器需要对页面进行处理和渲染。在计算能力有限、动力不足的移动设备上，以及受限的无线和蜂窝网络上，这会对用户体验产生不利影响。

　　从终端用户角度来看，在移动设备上提供大型复杂页面意味着什么?下图显示了一个终端用户在各种同类最佳设备/网络上访问美国零售商的RWD网站主页的体验。图中的性能指标通过一个使用Safari远程调试功能的空浏览器缓存来捕捉。每个设备/网络进行的十项测试是通过下图显示的中间数字页面加载时间(onLoadevent)而进行的。结论显而易见，在无线网络上向移动设备交付相对比较小的700KB网站也会导致严重的性能缺陷。

　　图1：示例RWD网站并未达到终端用户的性能期望值

　　从根本上说，终端用户并不关心在无线和蜂窝网络上向受限设备提供优质速度的基础技术挑战。他们只要求网站能够像他们希望的那样快速加载和运行。终端用户期望值只会变得越来越高，相应地，他们也希望网络应用程序变得更快、更丰富、更加引人入胜。

　　提供快速优质响应式网页设计网站的步骤

　　如何才能提供快速、高质量的RWD网站?如前所述，RWD页面包含了展示所有版本的网站，包括移动和桌面视图在内所必要的HTML。CSS和JavaScript在浏览器中运行，并会隐藏或修改内容，以适应屏幕尺寸。在智能手机上，这往往意味着浏览器需要下载并展示桌面网站所需的全部内容，让CSS/JS隐藏绝大部分内容。

　　第一步要关注真实页面以及向终端用户提供的相关对象。对于那些希望交付复杂RWD网站相关的开发者来说，也有多种选择。首先，让内容尽可能地靠近终端用户，例如使用CDN并充分利用SPDY(一个传输网络内容的开放式网络协议，与无线网络尤为相关)这样的最佳交付机制。

　　接下来关注于RWD应用程序、HTML、图像、JavaScript 和CSS对象的组成要素。为了更快加载页面，重点是：

　　· 减少请求数量

　　· 减少字节数量

　　· 加速渲染

　　下面我们来详细探讨这些因素。

　　减少请求数量

　　最快的请求是不发起请求。每个客户端的HTTP请求和服务器相应组合至少代表网络上的一个往返。根据终端用户的情况及其离原始服务器的距离，一个请求往返需要几秒钟来完成。一个网页在渲染内容之前需要几十个HTTP请求，而这些请求往往会因为特定浏览器限制的连接数量而彼此拖延。为了减少往返，需要使用多种技术来消除不必要的请求，如合并多个CSS和JavaScript文件，内联图像，以及利用HTML5中新的缓存功能。

　　图2：减少请求的一个简单的办法就是将多个CSS或JavaScript文件合并到一个文件夹中

　　减少字节数

　　原理很简单：网页越大(按字节数衡量)，在受限网络上交付网页的时间就越长，处理器处理和渲染内容的时间也就越长。图像尤其是RWD网站的一个难题，通过调整图片格式、改进缓存管理、压缩文件以及删除注释、空格和图像元数据等数据而将文件尺寸保持在可控范围内。自动化解决方案旨在帮助为合适的设备提供合适的图像分辨率，并避免过大图像，无论是大屏幕还是小屏幕，在用户能够感知到的范围内保持图像质量。例如，有的页面可专为加载当前视窗内可视的图片而优化。随着用户下拉页面，新图像按需加载。按需加载图像有助于改进页面加载时间，还可在用户没有真正下拉页面的情况下减少带宽。特别是对RWD网站来说，这种方式可以避免页面下载隐藏图片，同样适用于显示尺寸或情况。

原文转自：http://database.ctocio.com.cn/403/12837903_2.shtml