在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上。