将 JavaScript 文件移到 Magento 的底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4566946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move JavaScript files to the bottom in Magento
提问by capnhud
I see in the page.xml that the JavaScript files are set in the head like so:
我在 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>
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_endadd back the JavaScript files?
然后在before_body_end添加回 JavaScript 文件？
回答by clockworkgeek
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 itemswere unset they would fail.
这种方法可以工作，但不是一个好主意。Magento 中有许多内联脚本依赖于预先加载的 Javascript 库。某些模块为某些页面添加了自己的脚本，如果未items设置，它们将失败。
If your aim is to improve page load times then script concatenation - as provided by "Merge Javascript Files" setting, Fooman Speedsterand previously mod_pagespeed (although the combine feature was buggy and removed) - will significantly reduce the round trip times of having scripts in the head.
如果您的目标是缩短页面加载时间，那么脚本连接 - 由“合并 Javascript 文件”设置、Fooman Speedster和以前的 mod_pagespeed（尽管合并功能有问题并已删除）提供 - 将显着减少将脚本放入的往返时间头部。
To effectively move all script to the bottom you would need to override Mage_Page_Block_Htmlto filter all script tags then replace them before the </body>tag. The before_body_endblock 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.
为了有效地将所有脚本移到底部，您需要覆盖Mage_Page_Block_Html以过滤所有脚本标签，然后在</body>标签之前替换它们。此时before_body_end块已经被渲染，所以你不能依赖它。我不想尝试它，因为仍有很多可能出错的地方。
回答by Marcio Maciel
For Magento v1.6+ (need to test in older versions);
对于Magento v1.6+（需要在旧版本中测试）；
1 - create an template file in page/html/footer/extras.phtmlwith this content:
1 -page/html/footer/extras.phtml使用以下内容创建模板文件：
<?php echo $this->getCssJsHtml() ?>
2 - Add this html node to your layout xml:
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 - That is it!
3 - 就是这样！
