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 in Web Development by anonymous
• 1,910 points
19 views

1 answer to this question.

0 votes
  • 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 by Niroj
• 3,230 points

Related Questions In Web Development

0 votes
1 answer

What is the difference between span and div?

The div should be used to wrap sections of ...READ MORE

answered Jan 16 in Web Development by Niraj

edited Jan 21 by Niroj 29 views
+1 vote
2 answers

What is the difference between web design and web development?

A designer designs the web pages and ...READ MORE

answered Jan 22 in Web Development by Niroj
• 3,230 points
22 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20 in Web Development by Niroj
• 3,230 points

edited Jan 21 by Niroj 29 views
+1 vote
1 answer

What is css box module?

Hey, All the element present in html follows ...READ MORE

answered Jan 20 in Web Development by Niroj
• 3,230 points

edited Jan 21 by Niroj 30 views
0 votes
1 answer

Explain the difference between visibility:hidden; and display:none?

hii, visibility:hidden; and display:none are totally different used ...READ MORE

answered Jan 20 in Web Development by Niroj
• 3,230 points
57 views
+1 vote
1 answer

How to access the Angularjs scope of a particular html element from our console?

Hello, You should follow the below steps:-- 1.Compile and ...READ MORE

answered Jan 21 in Web Development by Niroj
• 3,230 points

edited Jan 21 by Niroj 31 views
0 votes
1 answer

What does cors means in Angularjs and what the use of it?

CORS is Cross Origin Resource Sharing which means you ...READ MORE

answered Jan 29 in Web Development by kartik
• 1,910 points
39 views
0 votes
0 answers

How to start Airbnb Clone for Movies and Events Booking Website?

Instant #Online Movies and Events Ticket Booking ...READ MORE

11 hours ago in Web Development by Bessie
• 160 points

reshown 11 hours ago by Gitika 4 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 in Web Development by Niroj
• 3,230 points
71 views