将JavaScript文件移动到Magento的底部

Question

我在page.xml中看到JavaScript文件在头部设置如下:

<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-translator.phtml"/>
</default>

但是,如果我想把它们移到底部,我会做以下几点吗？

<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>

然后在before_body_end添加回JavaScript文件？

Answer 1

这种方法可行,但不是一个好主意.Magento中有许多内联脚本依赖于预先加载的Javascript库.某些模块为某些页面添加了自己的脚本,如果未items设置则会失败.

如果您的目标是改善页面加载时间,那么脚本连接 - 由"合并Javascript文件"设置提供,Fooman Speedster和之前的mod_pagespeed(尽管组合功能有问题并且已删除) - 将显着减少脚本的往返时间头部.

要有效地将所有脚本移动到底部,您需要覆盖Mage_Page_Block_Html以过滤所有脚本标记,然后在</body>标记之前替换它们.这个before_body_end块已经被渲染了,所以你不能依赖它.我不想尝试它,因为还有很多可能出错的地方.