将 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 以过滤所有脚本标记，然后将它们替换在 标记之前。此时 before_body_end 块已经被渲染，因此您不能依赖它。我不想尝试，因为仍然有很多可能出错的地方。

Answer 2

对于Magento v1.6+（需要在旧版本中测试）；

1 - 在 page/html/footer/extras.phtml 中创建一个包含以下内容的模板文件：

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

2 - 将此 html 节点添加到布局 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 - 就是这样！