Javascript at the bottom
Ronildo Costa
I'm saying it because when you analysis the website with YSlow it's one of the criteria.
--
Roni Costa
blog: http://www.ronildo.com.br/blog
twitter: twitter.com/ronildo
Beat
Once a browser finds javascript inside the <body> part, it will stop
parsing, and first render the page before interpreting the javascript
found in place (that's because it could contain write statements,
which are not good practice anymore) then continuing interpreting and
rendering again (causing delay in displaying and flicker if the
javascript modifies the display. That happens also when a javascript
is at bottom just before </body> .
There are 2 cases here:
a) javascript that changes the way things are displayed or needs to be
available immediately when page is displayed: those should remain in
the <head> element, otherwise you get flicker-displays which are not
accessible.
b) javascript that adds nice-to-have functions which are not needed
immediately, and doesn't change look of page. That can go both at top
and bottom.
Then there are also dependencies which should be taken in account (see
my reply on the other javascript thread).
So I'am all for adding a parameter for where to output javascript code
(with a priority to header if same javascript code or file include is
added at both bottom and header places), but you can't put all
javascript in end of document without flicker in browser. That voting
for bottom/header should also be made for core libraries btw.
Also once a js library is loaded, you won't have load delays anymore,
if the page cache time is correctly set.
Best Regards, and Merry Christmas,
Beat
http://www.joomlapolis.com/
On Dec 25, 9:43 pm, Ronildo Costa <roni...@gmail.com> wrote:
> What do you guys think to add some behavior to put the javascript at the
> bottom of the page??
> I'm saying it because when you analysis the website with
> YSlow<http://developer.yahoo.com/yslow/>it's one of the criteria.
Stian Didriksen
read an article, or some other content.
So loading the js at the bottom will display this content before it'll
load the JS.
Flickering is most of the time due to dirty javascript, and/or poorly
written JS.
If you do it right, the only thing the load order will change are the
page response times.
I have been involved with adding this capability to two backend
templates.
In this template: http://joomlacode.org/gf/project/khepri_refined/
and this one: http://extensions.joomla.org/extensions/administration/admin-navigation/9834
both templates are free, and it should be easy enough to just look at
the code to see how it's done.
(It loads all of the joomla JS at the bottom, not just the template
scripts).
Even with page caching, the response times are still affected, and
improved by loading it at the bottom.
Cheers,
Stian Didriksen
> Beathttp://www.joomlapolis.com/
Beat
Thanks for the 2 example templates. Cool.
Just to clarify your assertion about "dirty javascript":
If you read my reply fully, you will discover that there are 2 cases,
and both cases have legit NOT dirty uses.
One example:
You have an accessible form, which works without javascript displaying
e.g. all options, and enhance it using javascript, which modifies the
DOM or classes to hide options which are not selected, to then unhide
them when the corresponding main option is selected by the user: That
Javascript is *not dirty* needs to happen before the DOM is rendered.
There are many other examples, where loading at very end of body is
fine, as they don't change the way things are displayed. I have
suggested such a template feature too around 2 years ago. :-)
Hence my suggestion that javascript should not be loaded at bottom
systematically, but be a param of the javascript adding.
I would love to have a param to be able to load javascript at end of
page.
Standard front-end joomla javascript (maybe except the captions for
images ?) may load after body.
That said, there are other dynamic "lazy" late loading techniques for
javascript that can be done from head-loaded code too. So there are
lots of options here.
Finally, loading *all* CSS before any JS is also very important, as
already repeated many times, without effect yet unfortunately.
Best Regards,
Beat
http://www.joomlapolis.com/
On Dec 26, 6:04 pm, Stian Didriksen <st...@ninjatheme.com> wrote:
> Beat, well most of the time the user are wanting to see an picture or
> read an article, or some other content.
> So loading the js at the bottom will display this content before it'll
> load the JS.
>
> Flickering is most of the time due to dirty javascript, and/or poorly
> written JS.
> If you do it right, the only thing the load order will change are the
> page response times.
>
> I have been involved with adding this capability to two backend
> templates.
> In this template:http://joomlacode.org/gf/project/khepri_refined/
> and this one:http://extensions.joomla.org/extensions/administration/admin-navigati...
Stian Didriksen
I'm strictly talking about loading static js files at the bottom.
Not inline javascript code. Inline JS should always be in the head,
and if done right, wont have the page flicker if you do it
correctly ;)
So I don't think we're disagreeing here, but talking about separate
areas.
I agree with everything you said. And talking about CSS always
rendered first, that's also extremely important.
It does that in joomla out of the box with JDocument. But sadly most
templates does not use the j!1.5 apis to add scripts and stylesheets
to the head, and because of that you get a mix.
> Beathttp://www.joomlapolis.com/
Beat
You are right, the CSS/JS mix is due to templates, *including joomla
core templates* (which are used as examples by many template
designers) not using the Joomla mechanisms to add their own CSS and JS
files... ;)
Imho, that's a bug also in J 1.5. I think I reported that already 1.5
years ago...but I think the bug report got unfortunately rejected.
Regarding JS files or JS code, imho it doesn't matter to browsers,
both will be breaking the rendering, and cause extra-rendering
iterations.
Often the JS-code needs to be after the files, so a mechanism to add
js-code after files also for those files after body needs to be
available.
Also: Sometimes you need to add small js code just after including a
js file and BEFORE including the JS file after that. Current Joomla
framework 1.5 (and i believe 1.6 too) doesn't allow that.
Example: jQuery js framework needs a 1-liner to put it into non-
conflict mode with mootools. That's a 1-liner needing to be put just
after the file include. Not currently possible using Joomla js files
inclusion framework.
Beat
http://www.joomlapolis.com/
Stian Didriksen
In my experience patches for stuff that "isn't broken" are more likely
to be accepted for 1.6 than 1.5.
So perhaps you should try again? :)
JF file or JS code does matter as the code is loaded with the
document, in the same http request as the document. While a file is in
a separate http request.
I've never tested if there are noticable differences because of that
though.
On Dec 27, 10:03 pm, Beat <beat...@gmail.com> wrote:
> @Stian,
>
> You are right, the CSS/JS mix is due to templates, *including joomla
> core templates* (which are used as examples by many template
> designers) not using the Joomla mechanisms to add their own CSS and JS
> files... ;)
>
> Imho, that's a bug also in J 1.5. I think I reported that already 1.5
> years ago...but I think the bug report got unfortunately rejected.
>
> Regarding JS files or JS code, imho it doesn't matter to browsers,
> both will be breaking the rendering, and cause extra-rendering
> iterations.
>
> Often the JS-code needs to be after the files, so a mechanism to add
> js-code after files also for those files after body needs to be
> available.
>
> Also: Sometimes you need to add small js code just after including a
> js file and BEFORE including the JS file after that. Current Joomla
> framework 1.5 (and i believe 1.6 too) doesn't allow that.
>
> Example: jQuery js framework needs a 1-liner to put it into non-
> conflict mode with mootools. That's a 1-liner needing to be put just
> after the file include. Not currently possible using Joomla js files
> inclusion framework.
>
> Beathttp://www.joomlapolis.com/
Beat
You're right of course embedded js code is no http access (generally).
But for rendering breaking it is same, both do trigger a new drawing
of the page in most browsers.
My request that being able to output both js files and js code
together at the same places (head or bottom at caller's choice)
remains valid.
As we now both fully agree, I will stand away from this thread unless
new items require a reply.
Best Regards,
Beat
http://www.joomlapolis.com/
p.s. Thanks for your suggestion for trying again submitting bugs, but
sorry, my free time does not allow that, and I didn't notice any
improvement in the way the bug reports are treated lately, even those
with tested patches ready to be committed.
Andrew Godziuk
mentioned - it's called Shape 5 CSS and JS Compressor. The loading
time has been significantly better when loading scripts at bottom of
<body> has been enabled. It broke some of the scripts, though.
So +1 for making it available but disabled by default.
--
Andrzej Godziuk
http://CloudAccess.net/
Beat
need anymore to put scripts in footer as there is yet another way:
If you wish still place your scripts into your head section and take
benefit of a delayed load, you could use the "defer" attribute
(supported by IE and some new browser) or - for HTML5 browser that
support this feature - the attribute "async" for the asyncronous
script loading.
John Resig has a good post on browser performances here:
http://ejohn.org/blog/browser-page-load-performance/
and a nice talk on new browser features here (dated from February, but
at least those are now released):
http://ejohn.org/blog/talk-performance-improvements-in-browsers/
Peter van Westen
Just have the addScript() function add the scripts to a separate array
which is placed not by:
<jdoc:include type="head" />
But by:
<jdoc:include type="footer" /> |(or something like that).
You could have an extra param for the function to make it force the
script to be added to the head instead, in case you really want it in
the head. Or make a new function for that: addScriptToHead().
G. D. Speer
line to be placed in the template footer.
I'd rather not wait for browsers to implement a defer or async feature.
Sites are being scruitinized with YSlow
and a non-hackish solution to load selected JS from the bottom (with the
analytics?) would be very well received.
--
You received this message because you are subscribed to the Google Groups
"Joomla! CMS Development" group.
To post to this group, send an email to joomla-...@googlegroups.com.
To unsubscribe from this group, send email to
joomla-dev-cm...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/joomla-dev-cms?hl=en-GB.
--------------------------------------------------------------------------------
No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.5.431 / Virus Database: 270.14.123/2594 - Release Date: 12/30/09
07:27:00
Nicholas H
wrote:
> I think the solution for this should be quite simple!
> Just have the addScript() function add the scripts to a separate array
> which is placed not by:
> <jdoc:include type="head" />
> But by:
> <jdoc:include type="footer" /> |(or something like that).
>
I have need to add the script at times to the top or bottom, I hacked
in to an old version, instead of add to header, add to footer .. then
I could control did the js file get added where I was up to, at the
header or at the footer.