使用Ress改善响应式网络设计-IT业界-PHP中文网

>同一页面和资产（主要是）交付给所有设备。可以在媒体查询，元素和srcset属性中使用CSS背景图像限制图像加载，但支持仍然斑驳，并且无法解决所有问题。客户端适应技术也可以减慢页面渲染，这需要解决。例如，即使用户处于缓慢的连接，也可以将大图像传递到高密度的视网膜屏幕。
平均网页超过2MB。许多人使用响应式网络设计，但并不能在低功率设备上进行
。现在，基于性能，创建一个快速，响应迅速的网站已经变得更加急切。
> ress：响应式Web设计服务器端组件 Ress是由Luke Wroblewski在2011年提出的。该概念使用响应式Web设计，但用功能检测将其补充以在需要时提供修改的内容。例如，您可以：

或

当带宽受到限制时。

避免在iOS和越来越多的Android设备上提供Flash游戏或广告。> 切换到电子书阅读器上的灰度图像。>

降低了较慢连接的AJAX民意调查请求的频率。> 当设备不支持动画时，请删除不必要的css3效果。>当不可用SVG时，

fall to png图像。

在用户在特定位置或国家 /地区时提供其他信息。

Ress从未成为广泛使用的技术，因为功能检测很困难，尤其是在服务器上。每当发布新的浏览器或功能时，必须对您的检测代码进行验证，更新和维护。幸运的是，有第三方服务，例如NetBiscuits 为您努力工作，并不断使用最新的设备信息进行更新。第一步：注册NetBiscuits帐户 - 有30天的免费试用版来评估该服务。将NetBiscuits跟踪代码粘贴到您的网站模板中，等待几秒钟，然后查看有吸引力的设备和访问者流量分析图表：使用Ress改善响应式网络设计

>客户端设备检测API

跟踪代码还定义了一个名为DCS的全局JavaScript对象，该对象暴露了650多个硬件，浏览器，操作系统和网络检测参数。示例：评估带宽分数 - 从零（非常慢）到20（通常为边缘/HSPA）到60（3G）至120（4G/WiFi）的等级：

<span>var bandwidthScore = dcs.get('bandwidth.score'); // integer</span>

登录后复制

确定设备是否具有触摸屏：

<span>var touchScreen = dcs.get('browser.cantouch'); // boolean</span>

登录后复制

具有高密度像素比：

<span>var pixelRatio = dcs.get('internal.browserpixelratio'); // real</span>

登录后复制

设备有电话设施吗？

<span>var canCall = dcs.get('browser.cantelmakecall'); // boolean</span>

登录后复制

SVG受支持吗？有SMIL动画吗？

<span>var svg = dcs.get('browser.css.cansvg'); // boolean
</span><span>var svgSmil = dcs.get('browser.css.cansvgsmil'); // boolean</span>

登录后复制

找出用户的位置：

<span>var county = dcs.get('internal.countrycode'); // 2-character string, e.g. "US"</span>

登录后复制

建议兼容的HTML5视频格式：

<span>var videoFormat = dcs.get('video.suggestvideoformat'); // object</span>

登录后复制

检测正在使用哪个浏览器：

<span>var browser = dcs.get('browser.model'); // string, e.g. "Firefox 38"</span>

登录后复制

是否是最新版本：

<span>var latest = dcs.get('browser.islatestrelease'); // boolean</span>

登录后复制

>服务器端设备检测API

设备检测在服务器上最有用，您可以在发送响应之前对其进行修改。为PHP，Java和.NET提供了代码。 PHP例子... 该设备是否支持H264 HTML5视频并具有合理的连接？

<span><span><?php
</span></span><span><span>if ($dcs->video->canhh264 && $dcs->internal->bandwidthscore > 150) {
</span></span><span>	<span>echo '<video src="video.mp4" controls></video>';
</span></span><span><span>}
</span></span><span><span>?></span></span>

登录后复制

该设备是否支持Ajax并具有比iPhone 5（得分为100的参考设备）更好的JavaScript性能？

<span><span><?php
</span></span><span><span>if ($dcs->browser->canajax && $dcs->hardware->performance->js > 100) {
</span></span><span>	<span>echo '<script src="moderndevice.js"></script>';
</span></span><span><span>}
</span></span><span><span>?></span></span>

登录后复制

我们可能永远不会有一个易于开发并在所有设备上完美工作的解决方案，但是Ress提供了一个良好的折衷方案，可以解决响应式Web设计遇到的许多性能问题。您只需要一项好的设备检测服务。

>通过RESS

改善响应式Web设计的常见问题

> RESS和传统响应式网络设计之间的主要区别是什么？

>传统响应式Web Design（RWD）仅依赖于客户端（浏览器）来根据设备的屏幕尺寸调整网站的布局。另一方面，Ress（带服务器端组件的响应式Web设计）将客户端的响应能力与服务器端智能相结合。这意味着服务器检测到设备的功能并发送了优化的网站版本，从而带来了更高效，更量身定制的用户体验。

> Ress如何改善网站性能？

> ress通过减少发送到设备的不必要数据数量来改善网站性能。使用传统的RWD，发送了所有数据，包括设备上不可见的元素数据。但是，使用RESS，服务器仅发送与特定设备相关的数据，减少负载时间并提高整体性能。

RESS与所有类型的设备兼容吗？设计为与所有类型的设备兼容。 RESS的服务器端组件可以检测请求该网页的设备的功能，并相应地提供该网站的优化版本。这样可以确保从台式机到智能手机的所有设备都有无缝的用户体验。

> RESS如何影响SEO？

> ress可以对SEO产生积极的影响。更快的加载时间和改进的用户体验会导致较低的跳出率和更高的用户参与度，这是搜索引擎对网站排名时考虑的因素。此外，Ress允许通过搜索引擎机器人对内容进行更有效的爬网和索引。

>与传统RWD相比，实施Ress的挑战是什么？。它涉及服务器端编程和设备检测，这可能很复杂。此外，维护RESS网站可能会更具资源密集型，因为它需要对设备检测数据库进行定期更新，以容纳新的设备和浏览器。

可以与现有网站一起使用RESS，还是仅适用于新的网站？可以在现有网站和新网站上实现

。但是，将RESS集成到现有网站可能需要对网站的体系结构和代码进行重大更改，这可能是耗时且复杂的。

> RESS如何处理图像和其他媒体文件？ Ress可以根据设备的功能优化图像和其他媒体文件的交付。服务器可以调整图像大小，将其转换为更有效的格式，甚至完全省略了功能有限的设备。这样可以确保媒体文件不会不必要地减慢网站的加载时间。网站和可用资源。由于需要服务器端编程和设备检测，最初的实施可能更昂贵，但从长远来看，改进的性能和用户体验可能会导致更高的用户参与度，并且可能会带来更高的收入。