javascript - 我应该为静态 SPA 内联所有 CSS 和 JS 吗？

Question

我正在创建一个仅包含静态 HTML、JS 和 CSS 的单页应用程序。我需要支持 IE9+、现代桌面浏览器和 iOS 6+。

Web 是使用 grunt 构建的，我正在考虑将所有 JS 和 CSS 内联到 HTML 文件中，这将稍微简化处理。

由于没有服务器生成的内容，并且 .html 页面也被缓存，您在内联所有 JS 和 CSS 时是否发现任何陷阱或缺点？据我所知，它甚至可以提高性能，因为浏览器的往返次数较少，但也许有一些很好的理由不内联那些(相当大的)文件？

你有这方面的经验吗？

[编辑]似乎很不清楚。我不想手动将我正在使用的所有 JS 和 CSS 放入生成的 HTML 文件中。我有一个干净的元素结构，并考虑让 grunt 生成一个内联版本作为发布输出。我不会使用内联版本，既不用于开发也不用于调试。我的问题只是关于技术部分:是否会对浏览器产生任何负面影响(缓存除外，整个 html 都被缓存了，我可以忍受将其整体无效)？为什么内联作为自动构建过程的结果仍然被认为是不好的做法(缓存主题除外)？

Answer 1

这实际上是一个非常好的问题。

我能看到的唯一主要缺点是缓存。

您无法巧妙地缓存您的 CSS 或 JavaScript，并且您必须以某种方式使所有页面(包括 JS 和 CSS)上的缓存在每次更改时失效。

我什至可能更进一步，使用 Data URIs 内嵌所有图像，原因是额外的 HTTP 请求比加载额外 ~33% 的数据更昂贵，这要归功于 TCP 的工作方式(它开始缓慢，然后呈指数增加下载速度，直到数据包开始丢失)，一个额外的几个 KB 的最高速度可能只是比一堆新请求更好。