Javascript和CSS，内部HTML与外部文件

Javascript and CSS, inside HTML vs. in external file

本文关键字：外部文件 HTML 内部 CSS Javascript 更新时间：2023-09-26

在<style>...</style>和<script>...</script>标记之间，除了缓存之外，包含外部javascript和CSS文件与包含html文件中的所有javascript和CSS文件（甚至jQuery core！）之间有什么区别吗？（我想在本地处理那个html文件，所以缓存无关紧要）

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

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

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

非常好的例子是当你包括来自谷歌的jquery

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

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

因此，如果你想在本地保存它们，那么你必须维护它

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

需要记住的是，你必须确保依赖链没有被破坏，因为浏览器会同时加载脚本。

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

当你的css没有加载时，你的页面一开始看起来很糟糕，然后在应用css样式后就稳定了，因此，现在你必须在页面顶部声明你的css样式，然后等待浏览器处理所有这些，然后开始渲染你的页面，或者你让你的第一个页面加载缓慢，如果有进一步的请求，你的页面加载会更快，因为样式现在缓存在中

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

这是一个巨大的性能问题。你的load和DOMContentLoaded的发射速度会慢很多。

当浏览器解析代码的最后一行时，load将启动。所以浏览器会显示等待圈，直到所有资源都被加载和解析。浏览器同步加载多个资源。通过在HTML中包含JS和CSS代码，您将失去这种性能提升。

客户端没有什么不同，只是您可以减少请求，从而更快地加载。另一方面，您不会进行缓存，但也无法在多个页面之间共享JavaScript的样式。

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

如果只在一个页面上使用脚本和css，那么将它们包含在html中将是最快的方法，因为浏览器只需要发出一个请求。如果你在更多的页面上使用它们，你应该将它们设置为外部，这样浏览器就可以访问它们，并且只需要下载一次。例如，使用谷歌的jquery，如mentionned@hatSoft，甚至更好，因为浏览器非常喜欢在用户第一次访问时从引用它们的其他网站缓存它们。在现实生活中，你很少只在一个页面上使用脚本和css，所以将它们设置为外部通常对性能和维护都是最好的。就我个人而言，我总是把HTML、js和css严格分开！