很好奇我放置 Jquery 和 Bootstrap 文件的位置。他们建议您出于性能目的始终放在底部，但是当我检查使用 Jquery/Bootstrap 的网站时，大多数用户总是将它们放在顶部。我还应该在 bootstrap/Jquery 文件之前还是之后加载我自己的 JavaScript 文件？
如果我想覆盖它们的一些样式，我认为我会在引导文件之前先加载我自己的 css 文件，这是否正确并且同样适用于 javascript 文件？
【问题讨论】：
标签： javascript jquery css twitter-bootstrap
这真的取决于你想要实现什么，但通常 JS 放在底部，CSS 放在你的 head 部分。确保 jquery 库在 Bootstrap 的 JS 库之前加载，并且您的自定义 css 文件在 Bootstrap 的 CSS 之后加载，因此它将被覆盖。您可以从他们的 CDN（或其他，如 cloudflare - 例如 http://cdnjs.com/libraries）加载 Bootstrap 的 CSS。
确保您将所有这些都缩小并激活压缩，您应该不会遇到任何性能问题。
高级技术意味着在头部区域使用 CSS 中最重要的部分，然后在底部区域发送 CSS 的其余部分。或者将您的整个静态内容 (CSS + JS) 托管在 CDN 上。
【讨论】：
底部最好将所有脚本引用放在页面末尾</body>之前。在正常页面中应该如下所示。
<html>
<head>
<link href="path/to/file.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="path/to/file.js" type="text/javascript"></script>
</body>
</html>
虽然在某些情况下，如果您的任何函数需要在页面加载之前访问 JavaScript，则可能需要在页面加载之前加载 JavaScript。特别是如果您正在使用 JQuery UI 和 Bootstrap。
您可以使用defer 属性装饰您的脚本标签，以便浏览器知道在下载 HTML 后下载您的脚本：
<script src="Jquery.js" type="text/javascript" defer="defer"></script>
或
<script src="demo_async.js" async></script>
如果存在，它指定脚本将在可用时立即异步执行。
http://www.w3schools.com/tags/att_script_async.asp
如果您需要在页面中访问脚本以供使用，则脚本需要在使用前可用。虽然需要确保浏览器支持 defer="defer"。所有主要浏览器都支持异步。
默认情况下，Javascript 会阻止任何其他并行下载。因此，如果您的头部有很多标签，调用多个外部脚本将阻止 HTML 加载，从而以空白屏幕向用户致意，因为在 Java 脚本文件完全加载之前不会加载页面上的其他内容。在底部加载脚本的另一个优点是外部脚本引起的任何错误都不会阻止页面加载到浏览器。
样式 css 需要出现在顶部 <Head> 才能在页面中访问。
【讨论】：
通常是头部样式表和结束</body>标签之前的脚本：
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="your-other-styles.css">
</head>
<body>
<!-- content -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="your-other-scripts.js"></script>
</body>
</html>
您会希望将来自供应商（例如 jQuery 和 Bootstrap）的文件包含在之前您的文件中。这意味着：
window（jQuery 添加了$，
例如）但是，如果您需要脚本在加载内容之前可用（例如 Modernizr），那么将其放入 <head> 可确保它在您的任何内容之前准备就绪。
在底部包含脚本可确保首先加载实际页面内容；当最终下载脚本时，内容 (DOM) 将准备好供您的脚本操作。
* 假设您的选择器特异性至少与供应商 CSS 中的相同
【讨论】：