在我的HTML代码中插入JavaScript库和CSS的位置？ [英] Where to insert JavaScript Libraries and CSS in my HTML code?
问题描述
我对网络开发还有点陌生，当我在搜索其他主题的互联网时，我发现很多人在他们网站的不同地方放置了流行的JS库。
例如：在非常开始或 < head> < / head> 部分。 （加载任何JS代码或CSS文件之前）
例如：在结束< $ c>< head> < / head> 部分。 （加载所有JS代码和CSS文件后）
例如：在结束< c>< body> < / body> 部分。 （加载所有JS代码，文本，图片，视频，CSS文件等...）
所以我的问题是这样。
将下面的JS库，插件和CSS样式表插入到网页中以获得最快的加载时间和其他优势的最佳做法是什么？ - 请说明原因 -
JQuery及其插件
Bootstrap 3.js
Modernizr.js
Angular.js
另一个广泛使用的JS库，这里我不能提到...
Normalize.css
css
bootstrap.css更多
谢谢..！
没有所谓的标准方法。 我什么时候需要库？
你会看到，web文件加载行以下是我的意思：
< script& document.getElementById（target）。innerHTML =changed< / script>< p id =target>不变< / p> div>
#target 未更改，因为脚本在元素之前加载。 Web文件将按程序加载。当JavaScript的行被加载时。它立即执行，但目标元素不是。所以它不能更改元素。
即使使用jQuery，也有同样的问题：
div class =snippetdata-lang =jsdata-hide =false>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< script> $（＃target）。text（changed）;< / script>< p id =target> changed< / p> / div>
因此，我们经常使用 $（function（）{}） / p>
返回加载问题
将< script& code>标签或< link> 标签在主体（前面）或头部，想立即执行脚本，有时他们不会使用 $（function（））或 document.onload
在主体中添加< script> 标签或< link> 标签的人想要确保所有元素都已加载，然后执行脚本或加载CSS。
结束语
资源如jQuery首先，然后加载依赖的资源，如jQuery插件。
您应该将CSS链接放在< ; head> 标记，因为您不希望访问者在加载CSS文件之前看到未整理的内容。
如果您无法决定或不关心时间，将每个< script> 和< style> $ c>< head> 。
这里是您可能感兴趣的另一篇文章：网页的加载和执行顺序？
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.
eg: Inserting JS Libraries on the Very Beginning or Start of the <head> </head> section. (Before loading any JS Code or a CSS File)
eg: Inserting JS Libraries on the End of the <head> </head> section. (After loading all JS Codes and CSS Files)
eg: Inserting JS Libraries on the End of the <body> </body> section. (After loading all JS Codes, Texts, Images, Videos, CSS Files etc...)
So my question is this.
What is the best practice for inserting (where) following JS Libraries, Plugins and CSS Style Sheets to a web page for the most faster loading times and other advantages? - Please mention the reason -
JQuery and it's Plugins
Bootstrap 3.js
Modernizr.js
Angular.js
And another widely used JS Libraries which I couldn't mention here...
Normalize.css
reset.css
bootstrap.css + more
Thank You..!
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 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.
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>
Therefore, we often use $(function(){}).
Back to the loading problem
People who put their <script> tags or <link> tags in the body (in front) or in the head, wanted to execute the script immediately, sometimes they won't use $(function()) or document.onload
People who put their <script> tags or <link> tags in the body (in the end) wanted to ensure all elements are loaded then execute the script or load CSS.
Conclusion
You should load independent resources such as jQuery first, then load dependent resources such as jQuery plugins. Then you try to decide when you want the resources to start loading, then put the lines in places.
You should put CSS links in the <head> tag because you don't want visitors seeing unstyled content before loading the CSS files.
If you can't decide or don't care about the time, put every <script> and <style> tags in the <head>.
Here is another post you might be interested in: Load and execution sequence of a web page?
这篇关于在我的HTML代码中插入JavaScript库和CSS的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
