Javascript 什么';对于移动版本的网站,隐藏内容的最有效方法是什么?

Javascript 什么';对于移动版本的网站,隐藏内容的最有效方法是什么?,javascript,css,performance,mobile,Javascript,Css,Performance,Mobile,我正在开发一个大型网站的移动版。整个网站上有很多移动设备不需要的内容 最好的隐藏方法是什么? i、 e.什么会使浏览器的工作量最少,从而保持响应速度 CSS显示:无 例如,jQuery的方法(未测试): 我所看到的.remove()的优点是,元素实际上是从DOM树中删除的,从而减少了内存使用 对于jQuery路由,在document.ready之前是否有更好的事件可以钩住?(即,在制作DOM树时) 另外,有没有关于如何对其进行基准测试的建议 更新:提供自定义移动版本不是一个选项,它应该与现

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

最好的隐藏方法是什么? i、 e.什么会使浏览器的工作量最少,从而保持响应速度

  • CSS显示:无

  • 例如,jQuery的方法(未测试):

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

对于jQuery路由,在document.ready之前是否有更好的事件可以钩住?(即,在制作DOM树时)

另外,有没有关于如何对其进行基准测试的建议


更新:提供自定义移动版本不是一个选项,它应该与现有内容/be一起使用。

如果您是为移动开发,您的首要任务是减少带宽。移动站点的响应性通常不太依赖于呈现速度,而是取决于加载速度(甚至没有提到用户经常为流量付费)


另一个相关的注意事项是,请记住手机上的小屏幕。创建一个更轻松的站点通常是有意义的(无论是在哨声中的铃声还是在每页的内容中)。

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

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

根据上面的链接,您可以使用以下命令为不同的设备指定不同的样式表:

<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld"/>
或使用
@import

@import "screen.css" screen; @import "handheld.css" handheld;
移动门户可能是最好的选择,因为移动用户可能有不同的浏览模式和网站的不同用途(寻找不同的信息,使用不同的功能等)。但是,如果您想维护一个门户,那么只需利用HTML和CSS规范中已经提供的内容

注意: 如果您遵循设计模式,那么构建单个应用程序并根据用户是否通过
http://myapp.com
http://mobile.myapp.com
。这意味着您的控制器和型号保持不变,您只需为移动用户将访问的应用程序部分创建单独的视图。同样的技术也可用于生成RSS提要或实现RESTAPI

编辑: 较新的不兼容移动浏览器的问题有点棘手。一方面,他们呈现这两个电子表格的原因是,他们觉得web开发人员对移动用户来说过于简化/剥离了他们的网站(这是有充分理由的,因为许多较旧、较不先进的移动浏览器仍在使用),而移动浏览器在呈现功能方面正在赶上桌面浏览器。但是,分辨率差异和屏幕大小仍然是一个问题

所以我要做的是使用2套电子表格,但要为3套用户设计:

  • 桌面用户:仅加载
    屏幕.css
  • 新移动用户:加载
    screen.css
    掌上电脑.css
  • 老移动用户:仅加载
    掌上电脑.css

CSS的级联特性意味着,通过一些仔细的测试,您应该能够满足所有3个人口统计。您可以应用一些,但这似乎不是必需的。

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

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

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

如果mobile的内容比原始版本小得多,最好不要尽可能多地共享代码。将您的代码放在移动应用程序的单独文件夹中。你不会说多小就是多小,但即使这意味着少量的复制,你也值得这么做


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

最好不要这样做,而是呈现一个移动版的网站,其中不需要的内容甚至不在HTML中。目标平台的马力和带宽最小,最好不要发送内容,也不要运行额外的脚本。对于您的更新:关于可用选项,你想发送一个50kb的页面,运行额外的脚本,并让它在移动设备上响应,就像没有脚本的10kb页面……如果你想要性能,你不能在这里吃蛋糕,首先,您需要避免将所有未使用/浪费的内容发送到客户端。我应该说,在这种情况下,定制移动版本不是一个选项,更新了这个问题。有人告诉我们如何有条件地加载图片:我要再次重申一点,即使你不能生成特定于移动设备的版本,你至少应该在初始设计中针对移动设备进行定制。获取现有站点并使其在移动设备上运行可能是可能的,但它是否可用(在用户体验和速度方面)?谢谢,但这对我的情况没有帮助。也许,但这不是我的决定;)文章中写道:“大多数(如果不是全部的话)最新的移动浏览器,作为其“完整网络”座右铭的一部分,只是忽略了手持样式表,让那些对CSS方法抱有希望的人束手无策。”我想这是他们的选择。我的意思是,上网本通常运行桌面浏览器,智能手机浏览器几乎可以复制桌面浏览器的所有功能(不包括Flash等插件)。所以,如果这就是他们的目标,那么就把他们当作桌面客户端来对待。带宽消耗很重要,但重要的是不要这样做
@import "screen.css" screen; @import "handheld.css" handheld;
node.innerHTML = '';
node.parentNode.removeChild(node);