在响应式Web设计中提供资源文件（JS，CSS，图像）的最佳实践

Question

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

  

最近有很多关于响应式网页设计的文章。这种方法确实在最小化数据传输方面带来了一些挑Jason Grigsby对细节进行了非常好的报道。总而言之，CSS媒体查询 - 响应式设计的神奇之处 - 几乎不会减少数据传输到移动设备的开销。调整大小或隐藏不需要的图像仍需要将完整图像下载到浏览器。此外，JavaScript库等资源可能无法下载到移动设备，甚至无法为用户启用。

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

Answer 1

1. 很高兴允许Google出于各种原因托管您的jQuery库。阅读here
2. 不要将Javascript函数分散到多个文件中。客户端需要获取的文件越少，速度越快。多个文件意味着多个请求。
3. 通常，包含脚本很有用 在HTML标记的末尾。这使得HTML标记加载更快（页面生成更快），然后获取JS文件。
4. 学习为CSS使用精灵表。精灵表基本上是一个包含您需要的各种图像的大图像。单个大图像小于其各部分的总和，因为它只需要维护单个颜色表。此外，再一次，较少的文件要获取=较少的请求。

Answer 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

Answer 3

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

您可以查看其他前端技术，例如延迟加载图片（仅在视口附近加载图片时 - 检查jQuery lazy loading）并按需加载社交分享按钮（如TechCrunch.com）。