Javascript Jquery 和 Bootstrap 应该放在 HTML 文件的哪个位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30488298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where in the HTML file should Jquery and Bootstrap be placed?
提问by Mlbliner
Curious at to where I place my Jquery and Bootstrap files. They recommend that you always place at the bottom for performance purposes yet when I check sites that use Jquery/Bootstrap the majority of users always place them at the top. Also should I be loading my own JavaScript files before or after the bootstrap/Jquery files?
对我放置 Jquery 和 Bootstrap 文件的位置感到好奇。他们建议您出于性能目的始终放在底部，但当我检查使用 Jquery/Bootstrap 的站点时，大多数用户总是将它们放在顶部。我还应该在引导程序/Jquery 文件之前还是之后加载我自己的 JavaScript 文件？
I take it that I load the my own css file first before the bootstrap file if I want to override some of their styling, is this correct and does the same apply to javascript files?
如果我想覆盖它们的一些样式，我认为我首先在引导文件之前加载我自己的 css 文件，这是正确的，同样适用于 javascript 文件吗？
回答by Alex
Typically stylesheets in the head and scripts before the closing </body>tag:
通常在结束</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>
You'll want files from vendors such as jQuery and Bootstrap to be included beforeyours. This means that:
你会想从厂商如jQuery和引导文件将包含之前你的。这意味着：
- CSS: You can override their styles with your own*
- Scripts: You have access to any objects added to the global scope such as
window(jQuery adds$, for example)
- CSS：您可以使用自己的样式覆盖它们的样式*
- 脚本：您可以访问添加到全局范围的任何对象，例如
window（$例如jQuery 添加）
However, if you require a script to be available before your content loads (such as Modernizr), then putting it in the <head>ensures it's ready before any of your content.
但是，如果您需要在加载内容之前使用脚本（例如 Modernizr），则将其放入<head>确保它在您的任何内容之前准备就绪。
Including scripts at the bottom ensures that the actual page content is loaded first; when the scripts are finally downloaded the content (DOM) will be ready for your scripts to manipulate.
在底部包含脚本可确保首先加载实际页面内容；当脚本最终下载时，内容 (DOM) 将准备好供您的脚本操作。
* assuming your selector specificity is at least equal to those in your vendor CSS
* 假设您的选择器特异性至少等于供应商 CSS 中的特异性
回答by Garry
Bottom is best to place all your script references at the end of the page before </body>.It should look like below in normal page.
底部最好将所有脚本引用放在页面末尾的 . 之前。</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>
Although in some cases it may be necessary to load JavaScript before page load if any of your function need to access JavaScript before Page Load.Specially if you are working with JQuery UI And Bootstrap.
尽管在某些情况下，如果您的任何函数需要在页面加载之前访问 JavaScript，则可能需要在页面加载之前加载 JavaScript。特别是如果您正在使用 JQuery UI 和 Bootstrap。
You can decorate your script tags with the deferattribute so that the browser knows to download your scripts after the HTML has been downloaded:
您可以使用该defer属性装饰您的脚本标签，以便浏览器知道在下载 HTML 后下载您的脚本：
<script src="Jquery.js" type="text/javascript" defer="defer"></script>
or
或者
<script src="demo_async.js" async></script>
When present, it specifies that the script will be executed asynchronously as soon as it is available.
当存在时，它指定脚本一可用就异步执行。
http://www.w3schools.com/tags/att_script_async.asp
http://www.w3schools.com/tags/att_script_async.asp
If you need script to access in page for use then script need to available before using it. Although it need to be sure the browser support defer="defer". Async is supported by all major browsers.
如果您需要在页面中访问脚本以供使用，则脚本需要在使用前可用。虽然需要确保浏览器支持 defer="defer"。所有主要浏览器都支持异步。
Javascript by default block any other parallel downloads. So if you have many tags in the head, calling on multiple external scripts will block the HTML from loading, thus greeting the user with a blank white screen, because no other content on your page will load until the java script files have completely loaded. Another advantage to load script in bottom is that any error caused by external script will not stop the page from Loading to browser.
默认情况下，Javascript 会阻止任何其他并行下载。因此，如果您的头部有很多标签，则调用多个外部脚本将阻止加载 HTML，从而以空白的白屏问候用户，因为在 Java 脚本文件完全加载之前，您的页面上不会加载其他内容。在底部加载脚本的另一个好处是任何由外部脚本引起的错误都不会阻止页面加载到浏览器。
Style css need to present in top <Head>to access in page.
样式 css 需要出现在顶部<Head>才能在页面中访问。
回答by designarti
It really depends on what you want to achieve, but generally JS is placed at the bottom and CSS in your head section. Make sure that jquery library loads before Bootstrap's JS library and your custom css file loads after Bootstrap's CSS, so it will override. You can load Bootstrap's CSS from their CND (or others, like cloudflare - for example http://cdnjs.com/libraries).
这实际上取决于您想要实现的目标，但通常将 JS 放在底部，而将 CSS 放在您的头部部分。确保 jquery 库在 Bootstrap 的 JS 库之前加载，并且您的自定义 css 文件在 Bootstrap 的 CSS 之后加载，因此它将被覆盖。您可以从他们的 CND（或其他人，如 cloudflare - 例如http://cdnjs.com/libraries）加载 Bootstrap 的 CSS 。
Make sure you minify all that & activate compression and you shouldn't experience any performance issues.
确保您缩小所有这些并激活压缩，并且您不应该遇到任何性能问题。
Advanced technics imply using the most important part of your CSS in your head area, then send the rest of the CSS in the bottom area. Or have your whole static content (CSS + JS) hosted on a CDN.
高级技术意味着在头部区域使用 CSS 中最重要的部分，然后在底部区域发送其余的 CSS。或者将整个静态内容 (CSS + JS) 托管在 CDN 上。
