2

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..!

LuckyG
  • 131
  • 2
  • 12
  • Most of the time css goes in the head and JavaScript in the body. Just make sure your library tags are before your code and if you have ones with dependencies (like if you're loading both angular and jquery) make sure to load the dependencies first (so if you want full jquery with angular put the jquery tag before the angular tag so that angular will inherit from the full jquery) – Binvention Jan 10 '16 at 07:05
  • Also if you use normalize.css you don't need reset.css http://nicolasgallagher.com/about-normalize-css/ – Mi-Creativity Jan 10 '16 at 07:15
  • @Mi-Creativity Thank you very much for your help. Actually I am not going to use both of them one time.! I just wanted to know where to put them if i use one of them..! – LuckyG Jan 10 '16 at 10:47

4 Answers4

6

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?

Community
  • 1
  • 1
Daniel Cheung
  • 4,779
  • 1
  • 30
  • 63
  • Wow..! Super Answer..! This is what I wanted..! That's mean, If I want to change (or technically called "manipulate") DOM objects, I have to load my JS files "after" loading each and every other objects..! Am I correct..? – LuckyG Jan 10 '16 at 10:55
  • @LuckyG Yes, or suppress the JS or jQuery by using `document.onload = function(){}` / `$(function(){})` so the function only triggers after the document is loaded – Daniel Cheung Jan 10 '16 at 11:05
3

CSS can added inside header tag & but put all JS Libraries and custom files just before closing closing body tag

<body>
 //other tags
<script> All Scripts here </script>
</body>
  • By doing so you wont have to check if DOM content has loaded.
  • It decrease page loading time.Otherwise a js need to be completely loaded before DOM loading.
  • It also makes sure that all events are attached properly to DOM element.

I think this address all your concern specially the third one

brk
  • 48,835
  • 10
  • 56
  • 78
1

CSS Sheets go in the < head >. The order of the CSS files matter so libraries should be put in first then you can put in the specific ones you have.

Javascript links go in the < body > but place them at the very end. That way your HTML content loads first then the JS loads and it will recognize all your selections. It is more efficient to do it this way.

Badrush
  • 1,247
  • 1
  • 17
  • 35
1

The most important thing to note when placing your css and script tags is that the order you place them determines the order they are loaded in and if style or code is loaded later it over writes the code written before. So if you have css styling that assigns different styles to the same attributes of the same element then it is the one loaded later that takes effect. And with script tags it's important to remember that for dependency reasons. You should load the dependencies first so that they are there for the other scripts to use. Aside from that normally css tags are in the head and script tags at the bottom of your body element

Binvention
  • 1,057
  • 1
  • 8
  • 24
  • Thank you very much for your answer also..! I think we have to think and plan "when" need our js & css files for our page. – LuckyG Jan 10 '16 at 10:51
  • Here is what I do. I include any libraries like Bootstrap first. Then any CSS file that applies site wide. Then after that I include any CSS just for that page. This way that changes I want to make to the page don't get overwritten. As for JS links. Again put in jquery and other libraries first. Jquery is probably always first. Then any of your custom scripts go afterwards. – Badrush Jan 11 '16 at 19:34