10

We are developing large ASP.NET applications with lot of dynmically created pages containing ASCX controls. We use a lot of jQuery everywhere.

I have been reading that it would make sense to move the inline JavaScript code to the bottom of the page as it could delay the loading of the page when it's included "too early".

My question is now: Does this still make sense when working with jQuery?

Most of the code is executed in the ready handler, so I would expect that is does not slow down the loading of the page. In my case the multiple Usercontrols ASCX have all their own jQuery bits and pieces, and it would not be easy to move that all down in the rendered page.

Improve this question
4
  • Any reason why your ready calls aren't in an external file too? It's much more manageable than having those calls inline. Commented Nov 24, 2008 at 23:29
  • Is there anything more you were hoping to see in the answers? Seems like shame to leave a thread hanging like that... :-) Commented Dec 5, 2008 at 0:27
  • What I was looking for when I found this thread was how to get the ASP.NET ScriptManager to put the js references at the bottom of the page. Seems like something you'd want if you have code that uses this. Commented Jun 14, 2011 at 22:35
  • After posting my last comment, I found this omaralzabir.com/… where he has a solution using a filter to pull the scripttags out of the response and append then towards the end. Would need to see if it is a practical solution. ViewState-laden pages might end up slower. Commented Jun 14, 2011 at 22:40

4 Answers 4

Reset to default
15

Placing scripts late in the HTML is recommended because loading and executing scripts happens sequentially (one script at a time) and completely blocks the loading and parsing of images and CSS files meanwhile.

Large/lagged/slow-running scripts near the top of the page can cause unnecessary delay to the loading and rendering of the page content/layout.

Script's size (download time) and complexity (execution time (dom traversal, etc.)) factor in - but more importantly, the number of individual <script> HTTP requests matters far more (the fewer requests the better).

Using the "document.ready" handler lessens the delay caused by slow execution - but still leaves the problem of the sequential HTTP overhead.

Recommended reading: High Performance Web Sites by Nate Koeckley.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Recall that parallelism is normally good. Scripts don't necessarily lie on the same server as the HTML and CSS and images. Also, if the browser feels the tubes are clogged, it can simply not request the script. The sooner the browser has script information, the faster it can queue/thread it.
Scripts block loading of other objects - regardless of what server they lie on. Read the performance literature. I object to the vote down, BTW.
@strager: "if the browser feels the tubes are clogged, it can simply not request the script." Care to elaborate? I haven't seen that feature in any browser, ever. (It's up to the browser to parse the page and make a list of additional resources (images, styles, scripts) to download. It is NOT up to the browser to decide "oh, I just don't feel like downloading that ".)
@Piskvor, By that I think I meant (it was '08...) the browser can hold the request until later (queued) due to too many requests.
@strager: Indeed, most browsers have simultaneous download limits; but then script execution (and in many browsers, page rendering) is postponed as well (as @Már Örlygsson's answer and the linked paper says).
10

You could model the different ways of ordering the JavaScript in Cuzillion to see how it affects page loading.

See the examples and this blog post for examples of how ordering of page elements can affect speed.

Improve this answer

Comments

1

When you include JS then the loading of the page from that point will defer because of that the JS file might contain a "document.write" statement.

This means that the entire page will STOP being rendered from the point where you include your JS files and make the browser go "white" or something (at least not display the rest of the page) so the short answer is definitely yes...!

(Longer answer is "probably" with 99% probability)

As in move the inclusion of JS (and also inline JS - which you shouldn't use BTW) to the bottom...

When that's said if you're on ASP.NET you shouldn't use jQuery but rather Ra-Ajax which BTW have all these "best practices" automagically included for you...

Improve this answer

1 Comment

I know this is an old post at this point, and might have been valid at the time, but based on the fact the template website project in Visual Studio 2010 includes jQuery, there isn't any reason to discourage using jQuery in combination with .NET.
-2

Most of the time, the reason to move your JavaScript to the bottom of the page is to ensure that any DOM elements the JavaScript might reference have been created before the JavaScript is run. This also ensures that the page has time to render before running any JavaScript.

In this case, I wouldn't worry about moving the JavaScript down lower on the page.

Improve this answer

4 Comments

that's not true. The reason to put it at the bottom is so that the page content can load first, and you're not leaving the user looking at a blank screen while 200kb of scripts download.
Scott, that is the most obvious (and therefore most common) reason - true. However, as the poster points out, the availablility of document.ready handlers make that a non-issue. What remains is the page load performance issue. Nickf is completely right.
You cannot manipulate the DOM anyways (secure) before the page OnLoad is fired since it will trigger exceptions in some browsers... So this is a completely false statement... (sorry, -1, my first...)
Hmmm, then there's an argument to be made about compressing the scripts and linking to them rather than putting them inline.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.