head.js 和响应式网页设计答案

【问题标题】：head.js and responsive web designhead.js 和响应式网页设计
【发布时间】：2012-02-15 05:46:56
【问题描述】：

我一直在研究响应式网页设计技术和 head.js，我有几个问题。

在延迟加载外部 js 文件时，head.js 的加载时间实际减少了多少？
需要多少额外的开发/努力才能防止 Flash of Unstyled Content 问题？
head.js 的所有 CSS 功能是否都有助于创建响应式设计（针对不同尺寸的屏幕、设备等）？
head.js 会影响图像和插件的延迟加载吗？

当我们试图完成以下事情时，人们会推荐不同的东西吗：

大量 javascript 文件的快速、高效加载时间
缩短开发时间并增加多种设备和屏幕尺寸的用户体验
大规模应用程序的可扩展性
遵循最佳做法

感谢您的任何意见。

【问题讨论】：

标签： jquery css mobile responsive-design head.js

【解决方案1】：

我的两分钱：

我在使用 head.js 时遇到了一些问题，最终选择使用 script.js 进行异步 Javascript 加载。对于我正在开发的网站，大多数功能都是静态的或有后备功能。 FOUC 问题通常通过隐藏内容（使用 css）直到加载 javascript（然后使用 javascript 显示）来缓解。而且因为 Javascript 是缓存的，所以我真的只需要担心第一页的加载。

Modernizr 为您提供来自 head.js 的所有特征检测。将它与 html5shiv 捆绑在一起，您就可以从 head.js 获得 HTML5 IE 引导。 CSS3 媒体查询最适合响应屏幕宽度（并且可以使用 respond.js 来添加对 IE 6-8 的支持）。这些脚本最好使用传统的<script> 标签而不是异步加载器加载。理想情况下，它们都会被压缩到一个文件中。

Modernizr 自动隐藏任何带有.no-js CSS 类的内容。我还发现创建一个 .js 类，将其隐藏在 CSS 文件中，并在任何必要的脚本编写完成后使用 javascript 显示是很有帮助的。

不必在 <script> 标签中加载 jQuery 和一堆插件，这肯定会在加载时间感知上有所不同。也许某些行为不会在几秒钟内出现，但是哦，好吧。顺便说一句，为了避免 FOUC 或未定义行为的 Flash 问题，jQuery liveQuery 插件很棒。内联也可以，但是...

【讨论】：