Question

包含外部javascript和CSS文件，包括html文件中的所有javascript和CSS文件（甚至是jQuery核心！），除了缓存之外的<style>...</style>和<script>...</script>标签之间有什么区别吗？（我想在本地使用那个html文件，所以缓存并不重要）

Answer 1

不同之处在于您的浏览器不会发出这些额外请求，并且正如您所指出的那样，无法将它们与页面分开缓存。

从功能的角度来看，不，一旦加载资源就没有区别。

Answer 2

大多数时候我们看到CSS和javascript的外部路径的原因是因为它们现在保存在CDN或某种排序缓存服务器上，现在已经存在于云上

非常好的例子是当你从谷歌中包含jquery时

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

在这里我们看到Google正在为我们托管它，我们不需要担心维护等问题

因此，如果您想将它们保存在本地，那么您将不得不维护它

Answer 3

加载代码后没有任何区别。当然它不像你指出的那样被缓存，但是因为你只需要在本地做一些事情，所以它真的不那么重要。

要记住的事情是，您必须确保依赖链不会被破坏，因为浏览器会同时加载脚本。

编辑：当然，您的主页似乎需要更长时间才能加载，因为它必须在<body>开始加载之前下载所有额外内容。您可以通过在底部（靠近页脚）移动JS来避免这种情况。

Answer 4

当你的css没有加载时，你的页面一开始看起来很蹩脚，然后在应用css样式后就会解决，所以现在你必须在页面顶部声明你的css样式，然后等待所有的css样式处理浏览器，然后开始渲染您的页面，或者让您的第一页缓慢加载，并且在进一步请求时，您的页面将加载更快，因为样式现在已缓存

与您的脚本代码类似，现在您需要等待代码在页面上呈现，然后等待您绑定在$（document）.ready（）中的执行。我希望您意识到由于没有缓存，$（document）.ready现在将被延迟。

Answer 5

这有一个巨大的性能问题。你的load和DOMContentLoaded会慢一些。

当浏览器解析代码的最后一行时，

load将触发。因此浏览器将显示等待圈，直到所有资源都被加载和解析。浏览器加载多个资源同步。通过在HTML中包含JS和CSS代码，您将失去性能提升。

Answer 6

客户端没有区别，除了你会减少请求，因此加载速度更快。另一方面，您不会缓存，但您也无法在多个页面之间共享JavaScript样式。

如果你肯定只会在这个页面中使用CSS和JavaScript，那么内联就是很好的IMO。

Answer 7

如果您只在一个页面上使用脚本和css，那么在html中包含它们将是最快的方式，因为浏览器只需要发出一个请求。如果您在更多页面上使用它们，您应该将它们设置为外部页面，这样浏览器就可以将它们打包，只需下载一次即可。例如，使用谷歌的jquery，如提到的@hatSoft，甚至更好，因为浏览器非常喜欢将它们放在来自其他用户的缓存中，当用户第一次访问时，它们会引用它们。在现实生活中，您只在一个页面上使用脚本和CSS，因此将它们设置为外部通常是最佳的性能，并且绝对是维护。 Personaly我总是将HTML，js和css严格分开！

内部HTML与外部文件中的Javascript和CSS

7 个答案: