why css file include in header section but js file in the bottom

Question

Hi can any body help me....why css file include in header section but js file in the last of the page. can i also include the css file in bottom of the file.

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="myFolder/style.css" rel="stylesheet">
        </link>
    </head>
    <body>
        <div>
            <p>Paragraph 1 in the div.</p>
            <p>Paragraph 2 in the div.</p>
        </div>
    </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</html>

score 2 · Answer 1 · edited May 23 '17 at 12:14

When a browser encountered a tag pointing to an external resource, the browser would stop parsing the HTML, retrieve the script, execute it, then continue parsing the HTML. In contrast, if the browser encountered a for an external stylesheet, it would continue parsing the HTML while it fetched the CSS file (in parallel). The purpose of the "put stylesheets at the top and scripts at the bottom" rule is that, in general, it's the best way to achieve optimal progressive rendering, which is critical to the user experience.

Hence, the widely-repeated advice to put stylesheets first – they would download first, and the first script to download could be loaded in parallel.

However, modern browsers (including all of the browsers I tested with above) have implemented speculative parsing, where the browser "looks ahead" in the HTML and begins downloading resources before scripts download and execute.

For detail info refer this link : Css before Js

why css file include in header section but js file in the bottom

1 Answers1