单页web应用程序和内联javascript和CSS

我们已经构建了所谓的单页web应用程序（单个html页面+ajax）
为了尽可能减少http调用，我们将JS和CSS捆绑在2个文件中

同时，我们还了解了Google Buzz for mobile的构建方式，其中有一些有趣的地方：

• 内联脚本和样式
• 没有外部JS和CSS
• 数据：CSS中的图像而不是url（…）

因此，我们进一步在脚本和样式标记中“内联”了2个JS和CSS文件。删除2个宝贵的http调用

有人在桌面浏览器上遇到过这样的问题吗

---

我并不是在试图开启一场关于低调的宗教辩论；）它涉及性能、网络延迟、移动页面等。

内联和链接的CSS和脚本文件是等效的。除了HTTP GET之外，没有其他区别。

从不。将它们放在html头中，这样它们就可以先加载，而不会烦恼

您目前是否存在性能问题？谷歌为支持100K并发用户所做的并不一定是你应该做的。我发现，当CSS和JavaScript等内容保存在单独的包含文件中时，维护代码要容易得多。当有一个令人信服的理由时，我只会打断我认为良好的编码实践。很难想象一个单页应用程序会因为两个包含文件而被流量扼杀，这些文件在首次使用后将被用户浏览器缓存。

几乎没有人需要处理谷歌的流量。我要说的是，在优化方面追随谷歌的领先地位几乎是不值得的，因为它们根本不适用于现实世界。

这里值得注意的是，当出现冲突时，内联CSS会阻止特朗普链接的CSS文件

比如说

<style type="text/css">
  div .whiteBG {
    background-color: #fff;
  }
</style>

---

即使链接的文件是最后一个调用。

我认为你忽略了一个事实，即没有人用谷歌Buzz或Gmail这样的系统对你看到的输出进行编码。他们依赖于一个非常复杂的系统，该系统构建在Python和C之上，以编译源代码，并使之对他们自己开发的“推送”系统非常友好

---

---

我认为你不应该像关注多个请求那样关注输出，我认为这个问题完全是次要的，而不是能够构建和部署你的应用程序。稍后，将重点放在将所有JS和CSS放在头上，因为这可以在部署时实际完成。

请注意，IE不支持

数据：

URLSO这实际上是一个问题，还是只是一个确认您实际信仰的请求？我显然对我得到的结果感到信服，但是不知道是否有人已经找到了一些隐藏的陷阱。除了维护意大利面和缓存（如其他地方所述）@Tom，如果你已经有一个绑定JS/CSS文件的脚本，那么添加一个逻辑来内联它们是相当容易的。@ck，缓存不是问题，由于html页面被缓存并以与CSS/JSS相同的速度变化，因此它不是一个内容站点，而是一个web应用程序，带宽成本会上升，因为它不再使用缓存的CSS、js或图像，而是反复下载所有数据。如果你有两个用户，那么如果你有一个非常快速的应用程序，你留下的影响是无价的。特别是在手机和高延迟连接上。@chad，内联文件位于cached@Mic，你说“应用程序”静态html页面不是“应用程序”。@chad，一个调用服务器的充满JS的html页面可以是一个应用程序，为什么你认为它不是呢？它不是关于流量，而是用户体验，即使在你测试应用程序时也会开始。是的，但谷歌所做的那种优化通常不会引人注目。如果谷歌将每次搜索的处理器使用率降低0.5%，他们就可以用节省下来的电力为一个小国供电（这是我编造的）。0.5%不会影响您的用户体验。将这两个文件内联，会产生明显的响应时间差异，尤其是在手机上。是的，这就是用户体验。定义“引人注目”。你有没有性能统计数据，或者只是在关注它？从17次呼叫逐渐减少到3次，现在是1次（页面）。不需要测量，你只需要看就可以了。这很有趣，即使你放了一个！重要吗？但是由于我们删除了所有外部CSS，我们就不会有这种潜在的麻烦了。@Mic:不，我不是这么说的。对于相同权重的选择器，渲染器更喜欢内联而不是外部。如果你有！重要的是，内联的仍然是赢家。源代码在许多外部JS和CSS中，就在我们捆绑它们（自动使用脚本）时，我们添加了一个简单的额外步骤。对所有这些谈话感兴趣，我重新阅读了YSLOW页面，他们说，减少http调用是对初次访问的用户和40-60%的站点缓存为空的用户最显著的改进。他们还有一个内联与外部JS/CSS段落，在单页应用程序中看起来更倾向于内联@麦克很有趣。我完全可以理解你的观点——我只是认为重要的是要记住，对谷歌有效的东西并不总是对其他人有效。但如果它在你的情况下起作用，那就太好了。

  div .whiteBG {
    background-color: #ccc;
  }