包括css文件和Javascript文件的加载—如何优化

重复：

大家好，我的应用程序几乎完成了，但我注意到我包含了很多外部javascript文件和css。我在这里使用了很多第三方免费插件，我不想修改代码，因为我害怕把事情弄糟

但结果是，我注意到我现在已经包含了8个外部css文件以及多达20个外部Javascript文件：O-我不记得有任何主要网站包含超过2或3个css_js文件，所以我肯定在这里做错了什么。我该如何分类呢？我在某个地方读到，一个大的js文件比2或3个文件更快加载，这些文件甚至是累积大小的一半

如果您有任何帮助，我们将不胜感激

还有一个很好的教程：

读一下：

在过去的项目中，我经常动态压缩JS和CSS文件。它是一个基于PHP的文件缩小器

通过使用即时缩微器，您无需保留单独的源文件和缩微文件。当然，需要一点处理能力来不断缩小文件。此外，加载单个缩小文件更好，具有以下优点：

较小的文件大小（当然）

没有组件并行下载延迟，因为脚本/样式表更少

---

如果您将CSS文件按当前加载到页面的顺序组合成一个文件（JS也是如此），那么它们的工作方式将与以前完全相同；当您开始更改顺序时，规则会意外地覆盖它们不习惯的顺序。

一个大文件比一堆小文件好，因为在这种情况下，web浏览器向web服务器发出一个请求，而不是（比如）8个请求。更重要的不是总大小的细微差异，而是请求的总数

设想两种情况：下载一个8KB的文件和每个1kB的8个文件

在第一种情况下，总时间为smth，如80毫秒（传输时间）+50毫秒（延迟）=130毫秒

在第二种情况下，您有smth，比如8x10毫秒（传输时间）+8x50毫秒（！）的延迟=480毫秒（！）

你看到了区别。这绝不是一个全面的例子，但你明白了

---

因此，如果可能，将文件合并在一起。压缩内容以减少要传输的数据量。并使用缓存来消除重复请求。

无论如何，您的大多数文件都应该在客户端缓存中结束，这样我就不会太担心了。只要确保你设置了正确的标题。当然，如果这是您网站的首页，那么是的，您可能应该进一步优化。

如果我将javascript文件合并在一起，是否存在导致任何类型冲突的风险？或者只是将文件内容一个接一个地复制粘贴到一个大文件中？是的，可能存在冲突。但总有一个权衡：如果你想优化它，让它更快，你必须投入一些时间来确保它正常工作。虽然这个链接可以回答这个问题，但最好在这里包括答案的基本部分，并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效。请看这篇文章：。