Why is it generally a good idea to position CSS link s between head head and JS script s just before body

0 votes
Is there any exception exits if i do vice-versa. Does it a good practice to have js before css??
Jan 30, 2020 in Web Development by anonymous
• 37,520 points
10,028 views

1 answer to this question.

+1 vote
  • The main reason as to why JS files are linked at the bottom of the body is because whenever a browser encounters any JS, it parses it and executes that on the spot. Hence if it was to be added at the top, it would make the page rendering slow and thus it would take more time for page load. Moreover since the DOM won't be rendered fully, JS won't be able to manipulate the elements.

  • However if you use Jquery, that won't be an issue since it would execute only after the document is ready. But since in any case, the browser would parse it, it would slow the page load.

  • On the contrary, CSS files are linked in the head because they get applied regardless of DOM already rendered or not. Hence the webpage looks elegant as soon as the page loads. However just like JS you can link the CSS at the end which would mean that the webpage first loads with just plain HTML and then the CSS is applied to it. This shift is clearly visible to the user and moreover an important thing to remember is that the page would load with bare minimum HTML and if the user has slow Internet connection, the CSS load would take considerable amount of time, which means that the webpage shows just the HTML meanwhile. This might make the user close the website without waiting for it to load fully.

  • To avoid such things, a CSS file is linked at the head while a JS file is linked at the bottom.

  • Hope this might help you to understand the importance of it. You can follow this link https://www.edureka.co/complete-web-developer.

answered Jan 30, 2020 by Niroj
• 82,840 points

Related Questions In Web Development

0 votes
0 answers

what is the difference between jquery-1.8.2.js and jquery-1.8.2.min.js

i find a topic about difference between ...READ MORE

Aug 19, 2022 in Web Development by gaurav
• 23,260 points
745 views
0 votes
0 answers

What is the difference between margin and padding in CSS?

What is the difference between margin and ...READ MORE

Oct 28 in Web Development by Nidhi
• 3,820 points
59 views
0 votes
1 answer
0 votes
0 answers

How to pass command line arguments to a Node.js program and receive them?

How to pass command line arguments to ...READ MORE

Nov 26 in Web Development by Nidhi
• 3,820 points
36 views
0 votes
0 answers

How to run a function in a script from the command line in Node.js?

How to run a function in a ...READ MORE

Nov 27 in Web Development by Nidhi
• 3,820 points
30 views
0 votes
1 answer
0 votes
1 answer

What is the difference between margin and padding in CSS?

Feature Margin Padding space location An element's outer space, beyond its ...READ MORE

answered 5 days ago in Web Development by navya
23 views
0 votes
1 answer

What is a Favicon, and Why is It Important?

A favicon is your website logo that ...READ MORE

answered Jan 30, 2020 in Web Development by Niroj
• 82,840 points
1,135 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP