CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4
Dismissile
Dismissile

Reputation: 33071

jQuery Script included at bottom of page in mvc 4 template

I was looking at the MVC 4 release candidate and the default Internet template that is included. I noticed that in the _Layout.cshtml, they are including the jQuery bundle at the bottom of the page:

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

Is there a reason that the script was included at the bottom of the page instead of in the head section with the modernizr script? Are there any benefits to doing it either way? I was always under the impression that you should include your scripts in the head section.

Upvotes: 6

Views: 4040

Answers (3)

Carl R
Carl R

Reputation: 8214

For some sites where jquery ui themes is used, it's better to have jquery and the jquery-ui at the top. That way the flash of unstyled content can be kept to a minimum.

An other technique is to hide jquery themed elements initially, but that could give an impression of a slower loading time.

Upvotes: 1

BZink
BZink

Reputation: 7967

This is generally done for performance. Look at the Yahoo performance guidelines.

http://developer.yahoo.com/performance/rules.html/

They explain why scripts can be better at the bottom.

Upvotes: 7

Gian
Gian

Reputation: 13955

I can't answer specifically for this case, but the idea is generally that the browser is attempting to render the page in approximately document order. Having the scripts included last means that the renderer can do its work and render the static portions of the page, and then the scripts will be loaded. I couldn't give any concrete figures on how much it really affects the user experience, but the idea is to make it such that the page is viewable before the scripts have finished loading.

Upvotes: 0

Related Questions