隐藏移动版网站内容的最有效方法是什么？答案

【问题标题】：What's the most efficient way to hide content for a mobile version of a site?隐藏移动版网站内容的最有效方法是什么？
【发布时间】：2011-03-12 06:42:36
【问题描述】：

我正在开发一个大型网站的移动版本。整个网站中有很多内容是移动设备不需要的。

隐藏它的最佳方法是什么？即，什么会导致浏览器的工作量最少，从而保持响应？

CSS 显示：无

jQuery的.remove()方法，例如（未测试）：

var elements_to_remove = [
  '#sidebar',
  '#footer',
  '#etc'
];

$.each(elements_to_remove, function() {      
  if ($(this).length > 0) {
    $(this).remove();
  }
});

我可以看到 .remove() 的优点是元素实际上是从 DOM 树中删除的，从而减少了内存使用量。

对于 jQuery 路由，是否有更好的事件来挂钩 before document.ready？（即在制作 DOM 树时）。

另外，关于如何进行基准测试有什么建议吗？

更新：提供自定义移动版本不是一种选择，它应该与现有内容一起使用/'responsive'。

【问题讨论】：

最好不要这样做，而是呈现网站的移动版本，其中不需要的内容甚至不在 HTML 中。您定位的平台具有最少的马力和带宽，最好不要发送内容和运行额外的脚本。
对于您的更新：关于您的可用选项，您希望发送一个运行附加脚本的 50kb 页面，并让它在移动设备上响应，例如 10kb 页面没有脚本......你不能在这里吃蛋糕/吃蛋糕，如果你想要表现，你需要避免首先将所有未使用/浪费的内容发送给客户端。
我应该说在这种情况下自定义移动版本不是一个选项，更新了问题。
这里有人告诉如何条件加载图片：stackoverflow.com/questions/6844020/…
我要重申一点，即使您无法制作特定于移动设备的版本，您至少应该在初始设计中针对移动设备进行定制。使用现有网站并使其在移动设备上运行可能是可能的，但它是否可用（在用户体验和速度方面）？

标签： javascript css performance mobile

【解决方案1】：

最有效的方法是首先不包含页面上的内容。

移动用户会感谢您没有在页面上未显示的元素上浪费他们的数据费用，如果他们不需要 JavaScript 即可正确查看页面，他们会很高兴。

【讨论】：

谢谢，但这对我没有帮助。
也许吧，但这不是我的决定；）

【解决方案2】：

Both HTML and CSS provide ways of doing this without JavaScript.

根据上面的链接，您可以使用以下方法为不同的设备指定不同的样式表：

<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld"/>

或者如果您想使用单个样式表：

@media screen { /* rules for computer screens */ } 
@media handheld { /* rules for handheld devices */ }

或@import:

@import "screen.css" screen; @import "handheld.css" handheld;

移动门户可能是最佳选择，因为移动用户可能有不同的浏览模式和网站的不同用途（正在寻找不同的信息、使用不同的功能等）。但是，如果您想维护一个单一的门户，那么只需使用 HTML 和 CSS 规范中已经提供的内容。

注意： 如果您遵循MVC 设计模式，那么构建单个应用程序并根据用户是通过http://myapp.com 还是http://mobile.myapp.com 访问站点来向用户呈现不同的视图应该相对容易。这意味着您的控制器和模型保持不变，您只需为移动用户将访问的应用程序部分创建单独的视图。相同的技术将用于生成 RSS 提要或实现 REST API。

编辑： 较新的不兼容移动浏览器的问题有点棘手。一方面，他们呈现这两个电子表格的原因是因为他们觉得 Web 开发人员对于移动用户来说过于愚蠢/精简了他们的网站（这是有充分理由的，因为仍然使用许多旧的、不太先进的移动浏览器），以及移动浏览器在渲染能力方面正在赶上桌面浏览器。但是OTOH，分辨率差异和屏幕尺寸仍然是一个问题。

所以我要做的是使用 2 组电子表格，但为 3 组用户设计：

桌面用户：仅加载 screen.css
新的移动用户：加载screen.css 和 handheld.css
老手机用户：仅加载handheld.css

CSS 的级联特性意味着，通过一些仔细的测试，您应该能够满足所有 3 个人口统计数据。可能有一些browser-detection tricks 可以申请，但这似乎没有必要。

【讨论】：

来自文章：“大多数（如果不是全部）最新的移动浏览器，作为他们“全网”座右铭的一部分，只是忽略了手持样式表，让那些对 CSS 方法抱有希望的人离开了在寒冷中"
我想这是他们的选择。我的意思是，上网本通常运行桌面浏览器，而智能手机浏览器已经到了能够几乎复制桌面浏览器的所有功能（减去 Flash 等插件）的地步。因此，如果这就是他们的目标，那么只需将它们视为桌面客户端即可。

【解决方案3】：

如果您正在开发移动设备，您的首要任务是减少带宽。网站在移动设备上的响应能力通常不太依赖于渲染速度，而是取决于加载速度（更不用说用户经常为流量付费）。

在相关说明中 - 请注意手机屏幕较小。制作一个更轻量级的网站通常是有意义的（无论是花哨的还是每页的内容）。

【讨论】：

带宽消耗很重要，但重要的是不要忘记减少组件数量以及延迟的影响。

【解决方案4】：

考虑到移动设备的内容远小于原始版本，最好不要尽可能共享代码。将您的代码放在移动应用程序的单独文件夹中。你没有说明有多小，但这样做可能是值得的，即使这意味着少量的重复。

有时最好是务实而不是严格遵守一套规则，例如 DRY。

【讨论】：

【解决方案5】：

添加或删除 HTML 的一种非常快速的方法是使用 innerHTML，例如：

node.innerHTML = '';
node.parentNode.removeChild(node);

您可以将这些命令放在 BODY 标记末尾的 SCRIPT 标记中。

【讨论】：