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

Question

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

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

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

你有这方面的经验吗？

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

Answer 1

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

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

你不能整齐地缓存你的CSS或JavaScript，并且你必须以某种方式使你的所有页面（包括JS和CSS）上的缓存在任何更改时都无效。

我甚至可以更进一步，使用 Data URIs 内联所有图片，原因是额外的HTTP请求比加载额外的~33％的数据更昂贵，感谢TCP的工作方式（它开始缓慢，然后指数级地增加下载速度，直到数据包开始丢失），最高速度的额外几KB可能比一堆新请求更好。

Answer 2

是。如果CSS资源很小，Google实际上会推荐它。 （注意：这仅适用于CSS）

  

现代浏览器在将内容绘制到屏幕之前阻止外部CSS。这会导致额外的网络延迟并增加向屏幕显示内容所需的时间。要优化渲染时间，如果外部CSS资源很小，您可以将它们直接插入HTML文档中。以这种方式内联小CSS允许浏览器继续呈现页面。

https://developers.google.com/speed/docs/insights/InlineCSS

显然，你会在开发过程中将这些资源分开并使用一些构建工具，如gulp / grunt。

Answer 3

不，你不应该用HTML内联CSS和JavaScript。将缓存单独的资源。想一想关注点！你将如何通过JSLint之类的东西运行JavaScript？当它全部内联时，你如何验证CSS？

Answer 4

将CSS和JS分开。如果您的HTML有所变化，但CSS没有变化，那么您要求用户再次下载所有CSS。如果CSS是一个单独的文件，那么浏览器将使用本地缓存版本，不需要额外访问服务器。

如果您正在使用grunt，请使用grunt-filerev之类的任务在缩小和连接后为CSS和JS文件名添加哈希值。

Answer 5

如果您在SPA html中内联JS和CSS，最终会出现无法维护的代码以及浏览器无法缓存CSS和JS文件的问题。

如果您正在使用grunt准备构建，为什么不像我们在常规应用程序中那样创建许多小的JS和CSS文件，然后使用 grunt-contrib-concat 来连接（也许也将它们缩小为一个文件，并将其作为HTML中的参考文献。

如果您需要一些示例代码，请告诉我。