Hi,
In my asp.net page, i am refring external javascript file.
As per my learning in web, it's recommended that always put inline java script at the bottom of page. There is no information i get about external javascript refrence
I want to know that if i am refing external javascript file then where should i write?
> 1. Inside <Head/> top of the page
> 2. bottom after closing tag of </form>
Putting javascripts at the bottom of the page is effective olny if thats a inline script.
Checkout the google page-speed tutorial for more info
Recommendations
Put external scripts after external stylesheets if possible.
Browsers execute stylesheets and scripts in the order in which they appear in the document. If the JS code has no dependencies on the CSS files, you can move the CSS files before the JS files. If the JS code does depend on the CSS contained in an external file — for example, styles that are needed for output you are writing to the document in the JS code — this isn't possible.
Put inline scripts after other resources if possible.
Putting inline scripts after all other resources prevents blocking of other downloads, and it also enables progressive rendering. However, if those "other resources" are external JS files on which the inline scripts depend, this might not be possible. In this case, it's best to move the inline scripts before the CSS files.
Cheers
Getting Head
I assume that each and everyone of you were taught to include your JavaScript files within the head element, and up to now, as far as you know, it has worked just fine for you.
Example:
<head>
<script type="text/javascript" src="js/DOMAssistant.js"></script>
</head>
Going Down?
However, another alternative approach started figuring on the web where people included their JavaScript files just before the closing body tag instead.
Example:
<script type="text/javascript" src="js/DOMAssistant.js"></script>
</body>
</html>
There are a number of reasons why this way of doing it is attractive:
There’s no need to have a check if the DOM is loaded, since by having the scripts at the end, you know for sure it is. A JavaScript script file has to be loaded completely before a web browser even begins on the next JavaScript file. The effect of this, if the JavaScript files are included at the top of the document, is that it will be a visual delay before the end user sees the actual page. This is completely avoided if you include the JavaScript files at the end of the document. It is also a recommended by Yahoo’s Best Practices for Speeding Up Your Web Site: Put Scripts at the Bottom.
Not Satisfied?
While including the JavaScript files at the bottom helps us around the problem of delaying the page rendering, thus giving the impression that each page in the web site loads faster, it does have a drawback.
If the page is visible to the end user, but the JavaScript files haven’t finished loading yet, no events have been applied to the elements yet (because everyone uses an unobtrusive approach, right?) and the user might start clicking around and not getting the expected results.
If you have proper fallbacks, e.g. a link element which gets content via AJAX if JavaScript is supported and the proper event has been applied, otherwise it’s a normal link leading to another page, then the problem isn’t that bad. Still somewhat annoying, though.
I’ve been swaying back and forth with my opinions about how to tackle this, and my conclusion is that every end user will be affected by page rendering delays, white pages etc, while only the fast clicking types will ever experience the fallback solution when content is visible but the JavaScript files haven’t been completely loaded.
Therefore, I’m including my JavaScript files at the bottom of a web page.
These are taken from robertnyman.com...
if youre going to use that script dynamically for each page. there is better way to do it. put that into your masterPage/
protected void Page_Load(object sender, EventArgs e)
{
string a = "$(function() {";
a +="$('.Utility.division() .items').hide();";
a += "});";
a += "</script>";
Page.RegisterClientScriptBlock("a", a);
}
Utility.division() is your dynamic variable which is declared in utility.cs//
@spielersun: I think you mean Utility.division() is your dynamic variable which is declared in utility.js rather than utility.cs.