Move JavaScript files to the bottom in Magento

I see in the page.xml that the JavaScript files are set in the head like so:

<default>
    <block type="page/html" name="root" output="toHtml" template="page/2columns-right.phtml">
        <block type="page/html_head" name="head" as="head">
            <action method="addJs"><script>prototype/prototype.js</script></action>
            <action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
            <action method="addJs"><script>prototype/validation.js</script></action>
            <action method="addJs"><script>scriptaculous/builder.js</script></action>
            <action method="addJs"><script>scriptaculous/effects.js</script></action>
            <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
            <action method="addJs"><script>scriptaculous/controls.js</script></action>
            <action method="addJs"><script>scriptaculous/slider.js</script></action>
            <action method="addJs"><script>varien/js.js</script></action>
            <action method="addJs"><script>varien/form.js</script></action>
            <action method="addJs"><script>varien/menu.js</script></action>
            <action method="addJs" ifconfig="dev/translate_inline/active"><script>mage/translate.js</script></action>
            <action method="addJs"><script>mage/cookies.js</script></action>
            <action method="addCss"><stylesheet>css/screen.css</stylesheet></action>

            <action method="addItem"><type>skin_css</type><name>css/styles-ie.css</name><params/><if>lt IE 8</if></action>
            <action method="addItem"><type>skin_css</type><name>css/styles-ie8.css</name><params/><if>IE 8</if></action>

            <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
            <action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>

            <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
            <block type="page/html" name="store_language_js" as="store_language_js" template="page/html/head-translat开发者_如何学JAVAor.phtml"/>
</default>

But if I wanted to move them to the bottom would I just do the following?

<reference name="head">
    <action method="unsetData">
        <name>items</name>
    </action><!– There are now no CSS/JavaScript links in the head –>

    <action method="addCss">
        <stylesheet>css/some-file.css</stylesheet>
    </action><!– There is now one CSS and no JavaScript links in the head –>
</reference>

And then in the before_body_end add back the JavaScript files?

That method could work but would not be a good idea. There are many inline scripts throughout Magento that depend on the Javascript libraries being loaded in advance. Some modules add their own scripts for certain pages and if items were unset they would fail.

If your aim is to improve page load times then script concatenation - as provided by "Merge Javascript Files" setting, Fooman Speedster and previously mod_pagespeed (although the combine feature was buggy and removed) - will significantly reduce the round trip times of having scripts in the head.

To effectively move all script to the bottom you would need to override Mage_Page_Block_Html to filter all script tags then replace them before the </body> tag. The before_body_end block will already have been rendered by this point so you could not rely on that. I wouldn't want to try it as there is still much that could go wrong.

For Magento v1.6+ (need to test in older versions);

1 - create an template file in page/html/footer/extras.phtml with this content:

<?php echo $this->getCssJsHtml() ?>

2 - Add this html node to your layout xml:

<reference name="before_body_end">
<block type="page/html_head" name="extra_js" as="extraJs" after="-" template="page/html/footer/extras.phtml">
    <action method="addItem"><type>skin_js</type><name>js/jquery.min.js</name></action>
</block>

3 - That is it!