Menu
I recently noticed that some (not all) of my javascript and jQuery scripts wouldn't work unless I put the link for the .js files nearer towards the bottom of the page instead of the head area where I put my links for my .css files.
From what I understand, javascript can go in either places and it is recommended to not be put in the header as it slows down the page loading process as well. At the same time, if I put it in the body tag of the html file, it looks somewhat messy and was wondering what the best practice is for putting .js files in a cleanly place. Should I always put it at the very bottom right before the ending body tag? How do professional web developers handle this?
226
Step 1: Firstly, we have to open that Html file in which we want to add the jQuery using CDN. Step 2: After then, we have to place the cursor between the head tag just before the title tag. And, then we have to use the <script> tag, which specify the src attribute for adding.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
External JavaScript files are often linked to from the document <head> but this is not a requirement. You can also place the link within the document <body> element.
It is actually best practice to load jQuery at the very end of the body element. This way all of your images load before jQuery.
If your scripts did not work unless you put them towards the bottom then you most probably started manipulating the DOM when the DOM wasn't ready yet (or maybe you used document.write, but I doubt that this was the case). To solve this you need to start processing only when the DOM is ready. With jQuery you'll need something like:
$(function() {
// DOM is ready here and you can safely manipulate it
});
Regarding how the positioning of the scripts affects performance I suggest you read those 3 articles from the guru of client side performance:
Asynchronous loading and delayed execution are very hot subjects right now. They allow you to cleanly define everything at the <head> but be very specific about how they get loaded and when they are excecuted.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
