Friday, May 1, 2009

[jQuery] Embedding jquery code in body of page...

Reading up on web page optimisation, the YSlow tool recommends that
you embed all Javascript in the foot of the webpage. This works OK
with Prototype/Scriptaculous but when I try to do the same with jQuery
the scripts get reloaded....

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="page_layout.js"></script>
</head>
<body>
content
</body>
</html>

works ok - but the supposed optimised code does not....

<html>
<head>
</head>
<body>
content

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="page_layout.js"></script>
</body>
</html>

It executes the two scripts twice - once from the URLs as provided and
once from the URLs with a "?_={timestamp}" parameter added to the end.
(This also results in downloading the scripts again)
[ This is part of an ajax() function call - but I have not made an
ajax requests) and so consequently the action which I would expect to
occur once occurs twice.... ] I can stop this happening by adding
logic to the call to say only execute once - but it still doesn't stop
the additional downloading of the script.

This is effectively a show-stopper in the project I'm working on as we
are trying to get the page content to load as quickly as possible -
and don't want the javascript evaluated until after the majority of
content has loaded - the double execution isn't too much of an issue
(we can work round that) but the double download isn't....

No comments: