Question

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

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

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

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

所以我的问题是这个。

将JS库，插件和CSS样式表插入网页以获得最快加载时间和其他优势的最佳做法是什么？ - 请提及原因 -

JQuery和它的插件

Bootstrap 3.js

Modernizr.js

Angular.js

另一个广泛使用的JS库，我在这里就提到了......

Normalize.css

reset.css

bootstrap.css + more

谢谢..！

Answer 1

CSS 可以添加到标头标记＆amp;但是在关闭结束标记

之前放置所有 JS 库和自定义文件

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

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

我认为这可以解决你所有关注的问题，特别是第三个

Answer 2

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

你看，网络文件逐行加载，让我们以下面的例子为例：

<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插件）。然后，您尝试确定何时需要开始加载资源，然后将这些行放在位置。

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

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

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

Answer 3

CSS表格进入＆lt;头＆gt; 。 CSS文件的顺序很重要，所以应该首先放入库，然后你可以输入你拥有的特定文件。

Javascript链接进入＆lt;身体＆gt; ，但将它们放在最后。这样，您的HTML内容首先加载，然后加载JS，它将识别您的所有选择。这样做效率更高。

Answer 4

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

在我的HTML代码中何处插入JavaScript库和CSS？

4 个答案:

返回加载问题

结论