WURFL与PHP中响应式设计的开销


Overhead of WURFL vs responsive design in PHP

我正在开发一个基于web的内部项目管理应用程序,该应用程序需要支持移动设备和桌面。

它是用Symfony2、jQuery、HTML5构建的。

在服务器端和客户端,使用WURFL与响应式设计之间是否有任何性能比较?具体来说,我考虑的是渲染时间、HTTP调用(这相当重AJAX)。

性能方面,响应式设计将整个负载放在客户端上,因此您应该通过在许多设备上进行测试来确保这一点充分发挥作用。并非所有的智能手机都是平等的——有些智能手机的CPU速度很慢,导致JavaScript代码和媒体查询速度非常慢。总的来说,使用服务器端代码可以为客户端带来更轻松的体验,同时也允许您对体验进行更精细的控制。

但在考虑这方面的性能之前,您应该考虑一下这种方法是否能提供足够的移动体验。移动版网站有两个重要方面值得您向往:

  • 适合上下文的体验--它应该能够提供为使用移动设备的人提供适当的体验。这可能是与在桌面请注意,使用移动设备并不一定意味着移动性——移动设备用户通常身体不动,但用户尽管如此,可能更喜欢在使用移动设备时的不同方式。随着我们与网络互动的方式越来越多:在笔记本电脑上看起来合适的前倾体验可能会让人感觉在与您交互的电视浏览器上完全不正确从房间的另一边
  • 设备敏感体验--应该是能够提供在设备上运行良好的体验供您的网站客户使用。此范围的可寻址设备不断增加,并变得更加多样化从手机到电视。有些人紧贴着脸,另一些人则在房间的另一边与交流。几乎不可能在如此广泛的设备上提供令人满意的体验,每个具有它们自己的输入/输出限制和约定,而无需根据设备定制体验。主要互联网品牌敏锐地意识到了这一点,并在这方面做得比实际情况多得多显而易见——即使是看似简单的谷歌主页也大大掩盖了不同的代码提供给不同的设备,用于在整个设备环境中实现有用的体验

然而,作为提供桌面和移动网站的一种手段,响应式设计无法同时提供理想移动网站的两个方面。

  • 它无法提供与环境相适应的体验,因为无论使用何种设备,都能提供相同的体验使用(对于限制用例)
  • 它只能为有限的设备范围,因为核心技术限制了范围可针对智能手机和其他高端设备设备。一刀切的问题和有限的可寻址设备可能不是所有网站的问题——有些网站不能很好地适应特定于移动设备的体验一些网站所有者可能不想为广泛的设备

值得注意的是,响应式设计对移动SEO的影响是未知的,因为尚不清楚搜索引擎是否会将内容识别为对移动友好的内容,并在移动搜索中对其进行相应的排名。

任何可以在服务器端确定并执行的逻辑都可以减少数据传输和客户端开销。减少发送内容的大小,例如相关的CSS、JavaScript、HTML和优化的图像,显然会减轻客户端的负担。

基于RESS的解决方案(即响应式设计+服务器端组件-http://www.lukew.com/ff/entry.asp?1392)将始终有机会比响应式设计解决方案本身更快。你总是需要考虑"更快"的重要性,但当我看到(可能设计不好)响应式设计网站向移动设备提供1Mb+的内容时,他们可以从服务器端的一点智能中获得巨大的性能优化。gomez@关于网站性能为何重要的白皮书http://www.gomez.com/resources/whitepapers/why-web-performance-matters/以及为什么每一秒都很重要。

有关服务器端功能检测如何提供帮助的一些示例,请参见http://www.opendeviceknowledge.com/discovery包括响应式设计和服务器端世界如何合作。

WURFL发明人,在这里。罗南·克雷明似乎对这个问题进行了相当广泛的讨论。归根结底,这是一个关于可用性与成本(包括开发和维护)的问题。

我唯一想指出的是WURFL和Responsive Web Design不需要是单独的世界。这篇和这篇文章有我对这个问题的看法。

更有趣的是,我们最近推出了一项服务,使一些WURFL也可以免费提供给Javascript开发人员。我建议你退房http://wurfl.io/地点

简而言之,如果你导入一个很小的JS文件:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

您将得到一个JSON对象,它看起来像:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(当然,这是假设你使用的是Nexus 7),你将能够做一些事情,比如:

if(WURFL.form_factor == "Tablet"){
    //dostuff();
}

这就是你要找的。

感谢