<style>...</style>包含外部 javascript 和 CSS 文件和包含所有 javascript 和 CSS 文件（甚至是 jQuery 核心！）在 html 文件中，除了缓存之外的<script>...</script>标签之间有什么区别吗？（我想在本地对那个 html 文件做一些事情，所以缓存无关紧要）
问问题
477 次
7 回答
3
不同之处在于您的浏览器不会发出这些额外的请求，并且正如您所指出的，不能将它们与页面分开缓存。
从功能的角度来看，不，一旦加载资源就没有区别。
于 2012-08-04T23:03:10.653 回答
1
大多数时候我们看到 CSS 和 javascript 的外部路径的原因是因为它们要么保存在 CDN 上，要么现在保存在云上的某种排序缓存服务器上
很好的例子是当你包含来自谷歌的 jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
在这里我们看到谷歌正在为我们托管它，我们不需要担心维护等
因此，如果您想将它们保留在本地，则必须对其进行维护
于 2012-08-04T23:07:13.337 回答
1
加载代码后没有任何区别。当然，它不会像您指出的那样被缓存，但是由于您只需要在本地执行某些操作，因此实际上并不那么重要。
要记住的是，您必须确保依赖链没有被破坏，因为浏览器会同时加载脚本。
编辑：当然，您的主页似乎需要更长的时间才能加载，因为它必须在<body>开始加载之前下载所有额外的内容。您可以通过将 JS 移动到底部（靠近页脚）来避免这种情况。
于 2012-08-04T23:10:25.867 回答
1
当您的 css 未加载时，您的页面起初看起来很糟糕，然后在应用 css 样式后它会稳定下来，因此现在您必须在页面顶部声明您的 css 样式，然后等待浏览器处理所有这些，然后开始渲染您的页面，或者您让您的第一页加载缓慢，并且在进一步请求时您的页面将加载更快，因为样式现在已缓存
与您的脚本代码类似，现在您需要等待您的代码在页面上呈现，然后等待您在 $(document).ready() 中绑定的执行。我希望您意识到 $( document).ready 现在将被延迟，因为没有缓存。
于 2012-08-04T23:13:24.447 回答
1
这存在一个巨大的性能问题。你的load和DOMContentLoaded会开火的方式更慢。
load当浏览器解析代码的最后一行时将触发。所以浏览器会显示等待圈，直到你所有的资源都被加载和解析。浏览器同步加载多个资源。通过在 HTML 中包含 JS 和 CSS 代码，您将失去这种性能提升。
于 2012-08-04T23:15:28.057 回答
1
客户端没有区别，除了你会做更少的请求，因此加载速度更快。另一方面，您不会进行缓存，但也无法在多个页面之间共享样式和 JavaScript。
如果您肯定 CSS 和 JavaScript 只会在此页面中使用，那么 inline 就可以了。
于 2012-08-04T23:16:32.187 回答
1
如果您仅在一个页面上使用脚本和 css，则将它们包含在 html 中将是最快的方式，因为浏览器只需要发出一个请求。如果您在更多页面上使用它们，则应该将它们设置为外部，以便浏览器可以缓存它们并且只需下载一次。例如，使用来自 google 的 jquery，正如提到的 @hatSoft，甚至更好，因为浏览器很可能已经将它们从其他站点缓存中，这些站点在您的用户第一次访问时引用它们。在现实生活中，您很少只在一个页面上使用脚本和 css，因此将它们放在外部通常是最好的性能，并且肯定是维护。就我个人而言，我总是将 HTML、js 和 css 严格分开！
于 2012-08-04T23:18:33.337 回答