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

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

Much has been said recently about Responsive Web Design. This approach does create some challenges with minimizing data transfer. Jason Grigsby has a very good write-up on the specifics. To summarize, CSS media queries — part of the magic sauce of responsive design — do almost nothing to lessen the overhead of data transfer to mobile devices. Resizing or hiding unwanted images still requires the full images to be downloaded to the browser. In addition, resources such as JavaScript libraries might be downloaded to mobile devices without even being enabled for users.

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

解决方法:

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

标签：javascript,image,responsive-design,mobile-website
来源： https://codeday.me/bug/20190521/1147236.html