我应该为静态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)上的缓存在任何更改时都无效.

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