在我的 HTML 代码中插入 JavaScript 库和 CSS 的位置？答案

【问题标题】：Where to insert JavaScript Libraries and CSS in my HTML code?在我的 HTML 代码中插入 JavaScript 库和 CSS 的位置？
【发布时间】：2016-04-14 15:54:04
【问题描述】：

我对 Web 开发并不陌生，当我在互联网上搜索其他主题时，我看到很多人将流行的 JS 库放在他们网站的不同位置。

例如：在 非常开始或 <head> </head> 部分的开头插入 JS 库。（在加载任何 JS 代码或 CSS 文件之前）

例如：在 <head> </head> 部分的末尾插入 JS 库。（加载所有 JS 代码和 CSS 文件后）

例如：在 <body> </body> 部分的末尾插入 JS 库。（加载所有 JS 代码、文本、图像、视频、CSS 文件等之后...）

所以我的问题是这样的。

在网页中插入（在哪里）以下 JS 库、插件和 CSS 样式表以获得最快的加载时间和其他优势的最佳做法是什么？ - 请说明原因-

JQuery 及其插件

引导 3.js

Modernizr.js

Angular.js

还有另一个我在这里无法提及的广泛使用的 JS 库...

标准化.css

reset.css

bootstrap.css + 更多

谢谢你..！

【问题讨论】：

大部分时间 css 放在头部，JavaScript 放在正文中。只需确保您的库标签在您的代码之前，如果您有依赖项（例如，如果您同时加载 angular 和 jquery），请确保首先加载依赖项（因此，如果您想要带有 angular 的完整 jquery，请将 jquery 标签放在前面角度标签，以便角度将从完整的 jquery 继承）
另外，如果你使用 normalize.css 你不需要 reset.css nicolasgallagher.com/about-normalize-css
@Mi-Creativity 非常感谢您的帮助。实际上，我一次不会同时使用它们。！我只是想知道如果我使用其中一个的话应该把它们放在哪里..！

标签： javascript jquery html css web

【解决方案1】：

没有所谓的“标准”方法。将线条放在哪里的选择归结为一个问题：我什么时候需要图书馆？

你看，网页文件是逐行加载的，让我们以下面的例子来说明我的意思：

<script>
  document.getElementById("target").innerHTML = "changed"
</script>
<p id="target">unchanged</p>

#target 不会更改，因为脚本是在元素加载之前加载的。 Web 文件按程序加载。加载 JavaScript 行时。它会立即执行，但目标元素不会。所以它不能改变元素。

即使使用 jQuery，也存在同样的问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $("#target").text("changed");
</script>
<p id="target">unchanged</p>

因此，我们经常使用$(function(){})。

回到加载问题

将<script>标签或<link>标签放在正文（前面）或头部的人，想立即执行脚本，有时他们不会使用$(function())或document.onload

将<script> 标签或<link> 标签放在正文中的人（最终）希望确保所有元素都已加载，然后执行脚本或加载 CSS。

结论

你应该先加载独立资源如jQuery，然后加载依赖资源如jQuery插件。然后，您尝试决定何时开始加载资源，然后将行放在适当的位置。

您应该将 CSS 链接放在 <head> 标记中，因为您不希望访问者在加载 CSS 文件之前看到无样式的内容。

如果您无法决定或不在乎时间，请将每个<script> 和<style> 标签放在<head> 中。

这是您可能感兴趣的另一篇文章：Load and execution sequence of a web page?

【讨论】：

哇..！超级答案..！这就是我想要的..！这意味着，如果我想更改（或技术上称为“操作”）DOM 对象，我必须“在”加载每个其他对象之后加载我的 JS 文件..！我说的对吗？
@LuckyG 可以，或者使用document.onload = function(){}/$(function(){})抑制JS或jQuery，这样该函数只在文档加载后触发

【解决方案2】：

CSS 可以在 header 标签内添加 & 但在关闭 body 标签之前放置所有 JS 库和自定义文件

<body>
 //other tags
<script> All Scripts here </script>
</body>

这样做您不必检查 DOM 内容是否已加载。
它减少了页面加载时间。否则在加载 DOM 之前需要完全加载 js。
它还确保所有事件都正确附加到 DOM 元素。

我认为这解决了你所有的问题，特别是第三个

【讨论】：

如果浏览器不支持 X css 功能，如何在哪里包含 modernizr 以提供 CSS 修复？？

【解决方案3】：

CSS 表格放在中。 CSS 文件的顺序很重要，因此应首先放入库，然后您可以放入您拥有的特定库。

Javascript 链接放在中，但放在最后。这样，您的 HTML 内容首先加载，然后 JS 加载，它将识别您的所有选择。这样做效率更高。

【讨论】：

【解决方案4】：

在放置 css 和 script 标签时要注意的最重要的一点是，放置它们的顺序决定了它们的加载顺序，如果稍后加载样式或代码，它会覆盖之前编写的代码。因此，如果您的 css 样式将不同样式分配给同一元素的相同属性，那么稍后加载的样式就会生效。对于脚本标签，出于依赖性原因，记住这一点很重要。您应该首先加载依赖项，以便它们可供其他脚本使用。除此之外，通常 css 标签位于 body 元素底部的 head 和 script 标签中

【讨论】：

也非常感谢您的回答..！我认为我们必须考虑并计划“何时”需要我们的页面的 js 和 css 文件。
这就是我所做的。我首先包括任何像 Bootstrap 这样的库。然后是适用于站点范围的任何 CSS 文件。然后，我只为该页面包含任何 CSS。这样，我想对页面进行的更改就不会被覆盖。至于JS链接。再次先放入 jquery 和其他库。 Jquery 可能永远是第一位的。然后您的任何自定义脚本都会执行。