在我的 HTML 代码中的何处插入 JavaScript 库和 CSS? [英] Where to insert JavaScript Libraries and CSS in my HTML code?
问题描述
我对 Web 开发并不陌生，当我在互联网上搜索其他主题时，我看到很多人将流行的 JS 库放在他们网站的不同位置.
I am little new to web development and when I was searching internet about other topics, I have seen many people has put popular JS Libraries in Different Places of their websites.
例如:在非常开始或开始 插入JS库</head> 部分.(在加载任何 JS 代码或 CSS 文件之前)
例如:在末尾 插入JS库</head> 部分.(加载所有 JS 代码和 CSS 文件后)
例如:在末尾 插入JS库 部分.(加载所有 JS 代码、文本、图像、视频、CSS 文件等之后...)
所以我的问题是这个.
将以下 JS 库、插件和 CSS 样式表插入(在哪里)到网页以获得更快的加载时间和其他优势的最佳实践是什么?- 请说明原因-
JQuery 及其插件
JQuery and it's Plugins
引导程序 3.js
Modernizr.js
Modernizr.js
Angular.js
还有另一个我不能在这里提到的广泛使用的 JS 库...
And another widely used JS Libraries which I couldn't mention here...
Normalize.css
Normalize.css
reset.css
bootstrap.css + 更多
bootstrap.css + more
谢谢...！
推荐答案
没有所谓的标准"方法.将线条放在哪里的选择归结为一个问题:我什么时候需要图书馆?
There is no so called "standard" method. The choice of where to put the lines boils down to one question: When will I need the library?
你看，网页文件是逐行加载的，让我们以下面的例子来说明我的意思:
You see, web files loads line by line, let's take the following as an example of what I mean:
<script>
document.getElementById("target").innerHTML = "changed"
</script>
<p id="target">unchanged</p>#target 没有改变，因为脚本在元素之前加载.Web 文件按程序加载.当 JavaScript 行被加载时.它立即执行，但目标元素不是.所以它不能改变元素.
#target isn't altered because the script was loaded before the element did. Web files loads procedurally. When the line of JavaScript is loaded. It is executed immediately, but the target element isn't. So it couldn't change the element.
即使使用 jQuery，也存在同样的问题:
Even with jQuery, there is the same problem:
<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(){}).
将
