我正在创建一个仅包含静态
HTML,JS和CSS的单页面应用程序.我需要支持IE9,现代桌面浏览器和iOS 6.
Web是使用grunt构建的,我正在考虑将所有JS和CSS内联到HTML文件中,这样可以简化处理.
由于没有服务器生成的内容,并且.html页面也被缓存,在内联所有JS和CSS时,您是否看到任何陷阱或缺点?据我所知,它甚至可以提高性能,因为浏览器的往返次数较少,但也许有一些很好的理由不能内联那些(非常大的)文件?
你有这方面的经验吗?
[编辑]
似乎还不太清楚.我不想手动将我正在使用的所有JS和CSS放在生成的HTML文件中.我有一个干净的项目结构,并考虑让grunt生成内联版本作为发布输出.我不会使用内联版本,既不用于开发也不用于调试.我的问题只是关于技术部分:是否会对浏览器产生负面影响(缓存除外,整个html被缓存,我可以将它作为一个整体使其无效)?为什么自动构建过程的内联仍然被认为是不好的做法(缓存主题除外)?
解决方法
这实际上是一个非常好的问题.
我能看到的唯一主要缺点是缓存.
你不能整齐地缓存你的CSS或JavaScript,并且你必须以某种方式使你的所有页面(包括JS和CSS)上的缓存在任何更改时都无效.
我甚至可以更进一步,使用Data URIs内联你的所有图像,理由是额外的HTTP请求比加载额外的~33%的数据更昂贵,这要归功于TCP的工作方式(它开始缓慢,然后以指数方式增加下载速度直到数据包开始丢失),最高速度的额外几KB可能比一堆新请求更好.