5

在阅读Not Your Parent's Mobile Phone: UX Design Guidelines For Smartphones - Smashing Magazine时，在“数据传输和定价”部分中，以下内容引起了我的注意：

最近有很多关于响应式网页设计的说法。这种方法确实在最小化数据传输方面带来了一些挑战。Jason Grigsby 对细节有很好的描述。总而言之，CSS 媒体查询——响应式设计魔法的一部分——几乎没有减少向移动设备传输数据的开销。调整大小或隐藏不需要的图像仍然需要将完整图像下载到浏览器。此外，诸如 JavaScript 库之类的资源可能会在没有为用户启用的情况下下载到移动设备。

当我阅读 Jason Grigsby 在 Smashing mag 文章中提到的长篇文章时，我想知道是否有人遵循一些最佳实践来避免此类问题？

4

3 回答 3

3
  1. 出于各种原因，允许 Google 托管您的 jQuery 库是件好事。在这里阅读
  2. 不要将您的 Javascript 函数分散在众多文件中。客户端需要获取的文件越少，速度就越快。多个文件意味着多个请求。
  3. 通常，在 HTML 标记的末尾包含脚本非常有用。这使得 HTML 标记加载速度更快（页面生成速度更快），然后获取 JS 文件。
  4. 学习在 CSS 中使用精灵表。精灵表基本上是一个包含您需要的各种图像的大图像。单个大图像小于其各部分的总和，因为它只需要维护一个单一的颜色表。同样，要获取的文件越少 = 请求越少。
于 2011-11-17T16:48:06.103 回答
2

这篇文章有一些好东西：http ://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

编辑：更多链接

https://developer.mozilla.org/en/Web_Development/Responsive_Web_design

http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/

http://www.html5rocks.com/en/mobile/mobifying.html

如果从移动设备查看同一站点时，如果这些资源在该视图中不相关，是否有任何最佳实践可以避免不必要的资源下载

假设您要询问资源的条件加载，请查看yepnope.js

于 2011-11-17T16:54:06.507 回答
0

我会推荐一些用于内容适应的后端解决方案。在我们的站点中，我们使用 Apache Mobile Filter 来删除与移动和/或平板电脑用户无关的多余内容，以及调整图像大小以减少加载时间。

您还可以研究其他前端技术，例如延迟加载图像（仅在图像靠近视口时加载图像 - 查看jQuery 延迟加载）和按需加载社交共享按钮（如TechCrunch.com）。

于 2012-02-13T21:16:13.503 回答