JavaScript : All Magento Js to the bottom [Problem]

Question

I have put on my page.xml a new block for add my minify magento scripts to the bottom.

<block type="page/html_head" name="javascript" as="javascript" template="page/html/javascript.phtml">
   <action method="addJs"><script>scripts.js</script></action>
</block>

And in my template just before </body> :

<?php echo $this->getChildHtml('javascript') ?>

It's perfect and scripts.js load now to the bottom.

But I don't understand because when I load scripts.js to the bottom nothing works correctly on my frontend and if I move to the top it's perfect...

Thanks for your help.

Answer 1

Before a JavaScript function or method can be called, it must be declared. Magento has many such calls within the body and as such, those calls will be to "undefined" functions. The way around that is to not initialize anything until the DOM has loaded and the scripts have downloaded, but Magento was not built like that. As such, unless you make a lot of changes, the core JavaScript needs to remain in the head. That said, there are usually some scripts that you can remove from pages such as the home page. That will be a performance boost at least for first-time visitors.