一页网络应用程序和内联 javascript 和 CSS答案

【问题标题】：One page web apps and inline javascript and CSS一页网络应用程序和内联 javascript 和 CSS
【发布时间】：2010-02-24 16:59:42
【问题描述】：

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

与此同时，我们了解了 Google Buzz 移动版的构建方式，其中有一些有趣的点：

内嵌脚本和样式
没有外部 JS 和 CSS
数据：CSS 中的图像而不是 url(...)

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

有人在桌面浏览器上遇到了一些麻烦吗？

我并不是要就隐蔽性展开宗教辩论；）这是关于性能、网络延迟、移动页面等...

【问题讨论】：

注意IE不支持data: URLs
那么这实际上是一个问题还是只是要求确认您的实际信仰？
我显然对我得到的结果深信不疑，但不知道是否有人已经得到了一些隐藏的陷阱。

标签： javascript html css mobile-website

【解决方案1】：

这里值得注意的是，内联 CSS 在发生冲突时会阻止 trump 链接的 CSS 文件。

例如

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

胜过包含

的链接CSS文件

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

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

【讨论】：

这很有趣，即使你放了一个 !important?但由于我们删除了所有外部 CSS，因此我们可以避免这种潜在的麻烦。
@Mic：不，我不是这么说的。对于相同权重的选择器，渲染器将更喜欢内联而不是外部。如果您对两者都有 !important，则内联的仍然会获胜。

【解决方案2】：

从来没有。将它们放在 html 头中，以便它们首先加载并且不要担心。

【讨论】：

对所有这些谈话很感兴趣，我重新阅读了 YSLOW 页面，他们说减少 http 调用是对首次访问者和 40-60% 的访问者最显着的改进在您的网站上有一个空缓存。他们还有一个内联与外部 JS/CSS 段落，在单页应用程序的情况下，这看起来有利于内联。 developer.yahoo.com/yslow/help/index.html
@Mic 有趣。我绝对能理解你的论点——我只是认为重要的是要记住，对谷歌有用的东西并不总是对其他人有用。但如果它适用于您的情况，那就太好了。

【解决方案3】：

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

【讨论】：

这与流量无关，而是在您对应用进行 Beta 测试时开始的用户体验。
是的，但 Google 所做的优化通常不会引起注意。如果 Google 将每次搜索的处理器使用量减少 0.5%，他们可以用他们节省的电力为一个小国家供电（这是我编的）。 0.5% 不会影响您的用户体验。
将 2 个文件内联，产生了明显的响应时间差异，尤其是在移动设备上。所以是的，这就是用户体验。
定义“显着”。您有性能统计数据还是只是在观察？
从 17 次调用逐渐减少到 3 次，现在是 1 次（页面）。无需测量，您可以看到它。

【解决方案4】：

内联和链接的 CSS 和脚本文件是等效的。除了 HTTP 获取之外没有任何区别。

【讨论】：

除了保持意大利面。
以及缓存（如其他地方所述）
@Tom，如果您已经有一个捆绑 JS/CSS 文件的脚本，那么添加一个逻辑来内联它们是相当容易的。
@ck，缓存不是问题，因为 html 页面被缓存并以与 CSS/JSS 相同的速度更改，它不是内容站点，而是 Web 应用程序

【解决方案5】：

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

【讨论】：

你的带宽成本会上升，因为它不再使用缓存的 css、js 或图像，而是一遍又一遍地下载所有数据
即使你有 2 个用户，如果你有一个非常快的应用程序，你留下的影响是无价的。尤其是在移动设备和高延迟连接上。
@chad，内联文件在缓存的html页面中
@Mic，你说“app”静态html页面不是“app”。
@chad，一个满是JS调用服务器的html页面可以是一个应用，为什么不这样认为呢？

【解决方案6】：

我认为您忽略了这样一个事实，即实际上没有人使用 Google Buzz 或 Gmail 等系统对您看到的输出进行编码。他们依赖于一个非常复杂的系统，该系统基于 Python 和 C 来编译源代码，并使其对他们拥有的本土“推送”系统非常友好。

我认为您不应该像多个请求那样关注输出，我认为该问题完全次要于能够构建和部署您的应用程序。稍后专注于将所有 JS 和 CSS 放在头脑中，因为这可以在部署时务实地完成。

【讨论】：

源代码在许多外部 JS 和 CSS 中，只是当我们将它们捆绑（自动与脚本一起）时，我们添加了一个简单的额外步骤。