[#10223] - place scripts in footer instead of head
- Closed
- 5 May 2016
- Medium
- Build: staging
- # 10223
- Diff
- hans2103:scripts-in-footer
- Success continuous-integration/travis-ci/pr The Travis CI build passed Details
- Success JTracker/HumanTestResults Human Test Results: 2 Successful 0 Failed. Details
User tests: Successful: Unsuccessful:
Reason of Change
I would like to be able to load my Javascript just before </body>.
Summary of Changes
Added a new class JDocumentRendererHtmlFooter in /libraries/joomla/document/html/renderer/footer.php and added function addFooterScript in /libraries/joomla/document/document.php so you can add scripts using JFactory::getDocument()->addFooterScript('JavaScript_File_Path.js') and render it using <jdoc:include type="footer" />.
Testing Instructions
In index.php in you template folder add just before the tag </body>
<jdoc:include type="footer" />
Now in layouts inside your template's folder you can use the following code to add javascript files to footer:
$doc = JFactory::getDocument();
$doc->addFooterScript('JavaScript_File_Path.js');
Refresh your website and notice that the script is placed just before </body>
Reasons why
The async and defer attributes for the <script> element have great support to pause and defer the execution of the script. But still... they are downloaded in the head.
Clear explain of async and defer can be found on: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
Comment by Paul Irish in Modernizr github repo why not to load modernizr in the head... and therefor move scripts to the end of body.
Modernizr/Modernizr#878 (comment)
- If you need html5shiv, split it out from modernizr and conditionally include it for IE8 (better as a conditionally included inline script)
- Determine if your use of Modernizr requires it to run in the
<head>. If it doesn't, defer loading it till the bottom of<body> - If you do need it in the head, make the build as small as possible and drop it into an inline script.
- Do not continue to use a
<script src=modernizr.js>from within the<head>
Thanks to @rishiv3 for his small repo: https://github.com/rishiv3/joomla-adding-javascript-file-in-the-footer
@dgt41 can you please look at this PR too?
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Labels |
Added:
?
|
||
| Category | ⇒ | Feature Request JavaScript Libraries |
| Labels |
Added:
?
|
||
I have tested this item 
successfully on 6e298ab
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10223.
I have tested this item successfully on 6e298ab
Tested succesfully, thanks Hans2103 for a great addition
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10223.
déjà-vu 
@fedir I wasnt going to ask if you had created a similar PR in the past
On 4 May 2016 at 13:07, Fedir Zinchuk notifications@github.com wrote:
déjà-vu [image:
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#10223 (comment)
Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/
Why wasn't it implemented before?
And what are the changes this one will?
Unfortunately it still isn't just as simple as this. You still should deal with at least duplicates now, and integration with JHtml::script() (otherwise you possibly have people trying to load jQuery in both the head through the JHtml function and the body through direct including of that file and nothing using JHtml::script() can make use of this right now meaning everything included into the body has no override possibility). IMO that's why things like this keep stalling out.
oh boy oh boy...
By reading the mentioned old topics I think it might be better to rewrite the entire addScript function... in J4. No BC needed. :-)
With the rewrite of the addSript function you can even add an order (first, second, third.... last) variable.
or...
We could improve this PR with full backwards compatibility.
Now you have your answer why previous PR have not been merged :)
yeah!
back to the drawing board I guess... or something to tackle during #JAB16.
yeah javascript and css rendering in JDocument is, IMHO, full of issues .
Just to name a few:
- doesn't process js/css dependencies
- inline scripts are merged which IMHO, does not make sense because the js order is important.
- inline css are merged which IMHO, does not make sense because the css order is important.
- doesn't allow to select the HTML doc position (footer/body) where they should be rendered
- doesn't allow data atrributes
- exist multiple methods with different behaviours (JHtml, addScript, addScriptVersion, addScriptDeclaration, etc)
- don't allow IE conditional statements
- etc
This needs a full rework IMO and there are several PR proposing most of this changes needed.
But i guess it will be very difficult before 4.0 because of B/C
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-05-05 08:00:38 |
| Closed_By | ⇒ | brianteeman |
I am closing this PR and have created a new placeholder issue #10250 where anyone interested in moving this concept forward can discuss together possible approaches. Thanks
This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/10223.
Tested succesfully, thanks Hans2103 for a great addition