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

Question

在阅读Not Your Parent的手机:智能手机用户体验设计指南 - 粉碎杂志时,在"数据传输和定价"部分,下面的内容引起了我的注意:

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

正如我在阅读Smashing mag文章中提到的Jason Grigsby 的冗长文章时,我想知道是否有人遵循一些最佳实践来避免这些问题？

Answer 1

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