在HTML文件中应该放置Jquery和Bootstrap?
好奇我放置Jquery和Bootstrap文件的位置。 他们建议您始终将底部置于底层以达到性能目的,但当我检查使用Jquery / Bootstrap的站点时,大多数用户始终将它们放在顶部。 我还应该在bootstrap / Jquery文件之前或之后加载我自己的JavaScript文件吗?
我认为我在引导程序文件之前首先加载我自己的css文件,如果我想覆盖它们的一些样式,这是否正确并且同样适用于javascript文件?
通常在结束标记之前的头部和脚本中的样式表:
您需要将来自jQuery和Bootstrap等供应商的文件包含在您的文件之前 。 这意味着:
- CSS:您可以用自己的*覆盖他们的样式
- 脚本:您可以访问添加到全局范围的任何对象,例如
window
(例如,jQuery添加$
)
但是,如果您需要在加载内容之前使用脚本(例如Modernizr),则将其放在可确保它在您的任何内容之前就绪。
在底部包含脚本可确保首先加载实际页面内容; 最后下载脚本时,内容(DOM)将为脚本操作做好准备。
*假设您的选择器特异性至少等于供应商CSS中的选择器特异性
底部最好将所有脚本引用放在之前的页面末尾。它应该在普通页面中如下所示。
虽然在某些情况下,如果您的任何函数需要在Page Load之前访问JavaScript,则可能需要在页面加载之前加载JavaScript。特别是如果您正在使用JQuery UI和Bootstrap。
您可以使用defer
属性修饰脚本标记,以便浏览器知道在下载HTML后下载脚本:
要么
如果存在,它指定脚本一旦可用就会异步执行。
http://www.w3schools.com/tags/att_script_async.asp
如果您需要在页面中访问脚本以供使用,则在使用之前脚本需要可用。 虽然需要确保浏览器支持defer =“defer”。 所有主流浏览器都支持Async。
Javascript默认阻止任何其他并行下载。 因此,如果头部有许多标签,则调用多个外部脚本将阻止HTML加载,从而使用空白屏幕向用户发出问候,因为在java脚本文件完全加载之前,页面上不会加载任何其他内容。 在底部加载脚本的另一个好处是,外部脚本导致的任何错误都不会阻止页面加载到浏览器。
样式css需要在顶部才能访问页面。
这实际上取决于你想要实现的目标,但通常JS放在底部,CSS放在你的头部。 确保在Bootstrap的JS库之前加载jquery库,并在Bootstrap的CSS之后加载自定义css文件,因此它将覆盖。 您可以从他们的CND(或其他人,如cloudflare)加载Bootstrap的CSS – 例如http://cdnjs.com/libraries 。
确保缩小所有这些并激活压缩,您不应遇到任何性能问题。
高级技术意味着在头部区域使用CSS中最重要的部分,然后将底部区域中的其余CSS发送出去。 或者将整个静态内容(CSS + JS)托管在CDN上。