在响应式网页设计中提供资源文件(JS, CSS,图像)的最佳实践



在阅读《不是你父母的手机:智能手机的用户体验设计指南》时,在Smashing杂志的"数据传输和定价"部分,下面的一条引起了我的注意:

最近关于响应式网页设计的讨论很多。这种方法在最小化数据传输方面确实存在一些挑战。杰森·格雷斯比在细节上写得很好。总而言之,CSS媒体查询——响应式设计的魔法酱的一部分——对于减少向移动设备传输数据的开销几乎没有任何作用。调整大小或隐藏不需要的图像仍然需要将完整的图像下载到浏览器。此外,诸如JavaScript库之类的资源甚至可能在未为用户启用的情况下下载到移动设备。

当我读到Jason Grigsby在Smashing杂志文章中提到的那篇冗长的文章时,我想知道是否有人遵循一些避免此类问题的最佳实践?

    由于各种原因,允许Google托管你的jQuery库是件好事。在这里阅读不要将Javascript函数分散到多个文件中。客户端需要获取的文件越少,速度越快。多个文件意味着多个请求。
  1. 通常,包含脚本效果很好在HTML标记的末尾。这使得HTML标记加载更快(页面生成更快),之后JS文件被获取。学习在CSS中使用精灵表。精灵表基本上是一个包含你需要的各种图像的大图像。单个大图像比其各部分之和要小,因为它只需要维护单个色表。同样,获取的文件越少=请求越少。

这篇文章有一些好东西: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

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

还有其他的前端技术,如延迟加载图像(只加载图像时,他们接近视口-检查jQuery延迟加载)和加载社交共享按钮按需(如TechCrunch.com)。

相关内容

  • 没有找到相关文章

最新更新