javascript - 在 Magento 中将 JavaScript 文件移动到底部

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此时 block 已经呈现，因此您不能依赖它。我不想尝试，因为仍有很多地方可能出错。