Javascript HTML+；JS+；CSS转换器

我有一个带有JS（jQuery）和CSS的HTML文件。我想要一个转换器，它可以转换所有文件，将其最小化，并将其全部放在index.html中。谷歌似乎正在使用这个，他们没有外部文件，甚至连图片都没有，所有的东西都在一个文件中，我确信在发布之前都已经编译好了

---

这也是一个好主意吗？

我不建议将CSS与JS结合起来。 只需将css放在页面顶部，js放在底部

要缩小CSS和JS，必须使用

---

另外，我建议您阅读本文：

总的来说，这不是一个好主意

拆分CSS和JavaScript文件意味着它们可以独立缓存。您可能会在许多页面上使用通用的CSS和JavaScript。如果不允许缓存这些文件，而是将它们存储在每个页面中，那么用户实际上是在为他们访问的每个页面下载这些文件的新副本

现在，提供这些文件的缩小版本是一个好主意。还要确保添加gzip或deflate传输编码，以便对其进行压缩。文本可以很好地压缩。。。通常约为1/8的比率

---

（我应该注意到，有一次我将所有内容加载到一个文件中。我当时正在为任天堂Wii开发一个单页web应用程序，它根本没有缓存功能。这大概是唯一一个将所有内容加载到一个文件中有意义的实例。即使如此，只有当你自动匹配服务器端。）

如果您想更快地加载页面：

对于图像：尝试使用图像精灵或来自不同域的图像，因为浏览器喜欢从不同域而不是一个域下载资源

对于脚本和css：使用可以减少空白和大小的在线缩微器（如果您在web主机上，您的主机可能已经在使用gzip等压缩脚本）

---

对于像索引页这样的登录页：如果样式较少，那么尝试将它们插入

标记中，这将使页面加载速度非常快，Facebook mobile就是这样做的

---

如果这不是一个好主意，谷歌也不会使用它

如果您将所有内容都放在一个文件中，当浏览器检查文件的较新版本是否可用时，您将收到较少的HTTP请求

您还了解到一些资源无法刷新的问题，这是“普通”开发人员的头痛问题，但在AJAX应用程序中却是一场灾难

我不知道有任何公开可用的工具可以做到这一切，当然谷歌也有自己的工具。另外，请注意，例如在GWT中，许多这样的嵌入都是由编译器完成的

您可以做的是搜索：

CSS图像嵌入器-用于将图像编码到CSS中

CSS和JS迷你版-用于构建单个CSS/JS并将其最小化

---

你需要一些简单的工具将其嵌入HTML。

这不是真的。Google.com引入了多个外部脚本。它们位于身体底部而不是头部。我不认为是这样，当事情组织起来时，情况会更好。Google不会在一个HTML文件中加载所有的CSS和JS文件，它们所做的是真正的不同的是，加载文件，然后神奇地使文件从源HTML中消失。例如顶部的css和底部的js reccomendation（+1）@Cezarisl不确定。因为head tag中的资源会阻止页面呈现，直到它们被下载。为了避免空白屏幕并提高页面加载速度，只需将JS移到底部。这通常不是一个好主意，谷歌也没有使用它。-1建议将base-64图像编码为CSS，没有任何解释。这实际上很少是一个好主意想法。当然，如果你有一些小图片，这可能是有意义的。否则，至少使用一个外部图像精灵。Base-64编码会增加约34%的开销。“对于像索引页这样的登录页：…快速”，这是为什么呢？因为现在不再从styles.css获取样式，通过发出http请求，浏览器可以轻松下载（尽管更大）没有.css文件的单个html文件我试图解释的一点是，每次浏览器必须发出http请求时，页面的加载速度都会变慢。此外，如果请求的资源（如图像等）来自同一个域，则加载速度会更慢