Mlb*_*ner 19 javascript css jquery twitter-bootstrap
好奇我放置Jquery和Bootstrap文件的位置.他们建议您始终将底部放在底部以达到性能目的,但当我检查使用Jquery/Bootstrap的网站时,大多数用户总是将它们放在顶部.我还应该在bootstrap/Jquery文件之前或之后加载我自己的JavaScript文件吗？
我认为我在引导程序文件之前首先加载了我自己的css文件,如果我想覆盖它们的一些样式,这是正确的并且同样适用于javascript文件吗？
Ale*_*lex 34
通常在结束</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中的选择器特异性相等
底部最好将所有脚本引用放置在页面末尾之前</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 会阻止任何其他并行下载。因此，如果 head 中有很多标签，调用多个外部脚本将阻止 HTML 加载，从而向用户显示空白屏幕，因为在 java 脚本文件完全加载之前，页面上不会加载其他内容。在底部加载脚本的另一个优点是，外部脚本引起的任何错误都不会阻止页面加载到浏览器。
样式CSS需要出现在顶部<Head>才能在页面中访问。