将所有包含的Javascript移到</ body>之前

35

有谁知道如何使Magento的所有JS脚本标签（例如<script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>在结束前渲染）</body>？

我曾经尝试过这种方法，但是我得到了一个错误，我认为这是沿着addJS方法使用的，在我使用它的地方（可能在参考页脚中）不可用。

magento-1  performance  theme  layout  javascript 
— 马克·韦斯顿
source
4
将GTMetix和YSlow的建议与少许盐混合。您花费在此上的时间不会带来明显的性能提高，几乎可以肯定，花更多的时间来分析代码（减少繁琐的工作）或只是找到更好/更快的主机是更好的选择。
— Ben Lessani-Sonassi
1
@sonassi虽然很合理，但花半小时来实现JMax的答案并不会有任何损害，并且是可以包含在基本主题中的一系列前端性能增强的一部分。
— 格洛
1
@Glo我们全力提升性能。但是，这种产生的“好处”根本不存在。第一次加载页面是JS第一次加载，然后从浏览器缓存中提供服务。与JS交付相比，阻塞初始加载很可能使PHP生成速度变慢。甚至，服务器传输或用户的最后一英里连接将在实际拉断所需的时间中起更大的作用。
— Ben Lessani-Sonassi
1
@sonassi就像是在说您应该忽略首次访问的用户，因为他们很快就会有准备好的缓存。当然，可以并且应该进行PHP增强，但是作为前台，我的工作是担心自己不仅可以加快资产交付速度，而且可以感知用户的加载时间并在底部加载脚本阻止阻止呈现的页面是该策略的一部分。现代浏览器可以无阻碍地处理脚本，但是您也知道电子商务中的毫秒数==££。当然，这通常是脚本加载程序的争论点。
— Glo 2013年
我在@Glo上工作，这只是效率调整的一小部分，可能不会产生昼夜差异，但不应忽略它。对于首次访问者而言，快速在屏幕上获取内容很重要。
— STW

Answers:

22

这取决于您的要求。例如，最后，我从HomepageMagento商店中删除了所有Prototype脚本，但我没有遇到任何问题。但是正如我所说，这取决于您的主题，扩展名等。

要移动脚本：

在page.xml主题中找到以下行

<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">

并在下面插入以下内容：

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

对于Magento 1.9，请使用以下命令：

<block type="page/html_head" name="jsfooter" as="jsfooter" template="page/html/jsfooter.phtml">
       <action method="addItem"><type>skin_js</type><name>js/yourskinfile.js</name><params/></action>
    </block>

在app / design / frontend / [package] / [theme] /template/page/html/jsfooter.phtml中创建模板文件，并将以下内容

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

在关闭</body>标签之前，在模板中添加以下内容。

<?php echo $this->getChildHtml('jsfooter') ?>
— OğuzÇelikdemir
source
你确定core/text_list有addJs()办法吗？
— 亚历克斯
你是对的@Alex，我误会了，对此感到抱歉！
— 奥古兹Çelikdemir
干杯，这有效。我实际上期望在完成此工作后不得不说的是，当您运行JS合并时，无论如何它都会否定这一点，因为合并的文件随后会附加到头部，但实际上，Magento在我的测试中似乎所做的是创建两个合并的文件，每个page / html_head块一个，并将页脚js的合并文件附加在“ </ body>”之前。这可能很有用。我在JS合并和jQuery方面遇到了一些问题，原因是不包括jQuery.noConflict。现在，我可以在“ </ body>”可能有用之前合并JS。
— 马克韦斯顿2013年
20

移动标签有两个问题。最大的问题是，由于某种原因，Magento将大量依赖原型的JS直接注入到<body/>标签中。将脚本移至文档末尾（虽然对于加载时间有利），将破坏Magento中的许多页面。

另一个问题实际上是在做。似乎没有<move />标签或类似的功能。对于创建的自定义脚本，我所做的就是添加这样的脚本。它是多余的，但是可以工作：

<block type="page/html_head" name="foot.scripts" template="page/template/foot-scripts.phtml">
    <action method="addJs"><script>jmax/global-min.js</script></action>
</block>
— 约瑟夫·斯威夫特·奥特
source
标记为@OğuzÇelikdemir正确，因为他提供了更详细的答案，但您基本上给出了相同的答案，因此非常感谢。
— 马克韦斯顿2013年
2
由于某种原因，您正在使用JavaScript框架，实际上是几种。他们必须尽早驻留以便正确呈现页面。有必要在正文结束之前包含某些JavaScript。如果您不了解这一点，并且一味地将其推到最底下，那么您就在从事货物崇拜编程。Magento可以用虚拟收音机和头戴式耳机搭建一些小棚子，有时还应该由那些经验丰富的Web开发人员来完成。有些东西完全属于放置位置。
— Fiasco Labs
15

在Magento 1.x中，这是傻瓜的事。如果您从中重新放置了核心JS文件，那么Magento中遍布模板文件的内联脚本根本就太多了，它们会中断<head>。在Magento 2中，这种情况可能会改变，但是随着Magento从Prototype迁移而来，它跨越了Prototype和jQuery。

对于其他脚本，应将它们放在</body>元素之前。我发现忽略Magento的<action method="addJS|addItem">XML并为每个脚本创建一个新的模板文件很有帮助，其中包括一个简单的HTML脚本参考，例如：

<script src="<?php echo $this->getSkinUrl('js/hobbiton.js'); ?>"></script>

然后，您可以将该模板文件嵌入到任何位置（并且仍然可以使用之前/之后来控制顺序），如下所示：

<block type="core/template name="jquery.hobbiton" after="-" template="custom/jquery/hobbiton.phtml" />
— 布伦丹·福尔科夫斯基（Brendan Falkowski）
source
6

在大多数情况下，将外部JavaScript移到底部是不够的。如果您将任何模板与内联JavaScript一起使用，例如在默认主题中，则需要延迟执行所有模板，直到加载所有依赖项（prototype.js，varien.js等）。

一种方法是<script>使用观察器从渲染的块中提取所有内联元素，http_response_send_before并将其移到外部脚本之后的最后。在使用时，您可以移动所有脚本元素，而不仅是内联的。这省去了通过布局模型移动它们的麻烦，这显然不是Magento想要的。

汤姆·罗伯肖（Tom Robertshaw）创建了一个完全做到这一点的扩展，使用一个观察者使用正则表达式更改响应HTML：https : //github.com/bobbyshaw/magento-footer-js

他使用core_block_abstract_to_html_after事件，但仅在当前块是根块时才采取措施。这意味着观察者的调用频率更高，但是它应该在某种程度上利用块缓存。

— 费边·施蒙格勒（Fabian Schmengler）
source
Robertshaw扩展程序在整个站点上都非常有效，除了OPC购物车的付款面板上。完全使面板空白。我认为这是Payment Gateway验证脚本。它将所有内容移到结束</body>标记之前的底部。
— Fiasco Labs
2

我强烈推荐mediarox pagespeed模块，以帮助您优化javascript（和css）并改善google pagespeed洞察力排名。

它的工作原理是解析Magento的html输出，然后对代码执行剪切和粘贴操作，以将javascript移至html代码的底部。该过程速度很快，但最好与整个页面缓存结合使用，以缓存html更改。

有关此模块如何工作的更多信息，并可以在此处帮助您提高页面速度排名：

http://blog.gaiterjones.com/magento-google-pagespeed-jscsshtmlminify-optimisation/

— j
source
-1

对于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-就是这样！

— 马西奥·马克西尔（Marcio Maciel）
source
-2

由于其他脚本（在product / list.phtml中）存在问题，<script type="text/javascript"> decorateList('category-list', 'none-recursive') </script> 我不得不在页面末尾移动一些JS。

我无法完成上述指示，因此我找到了另一种实现方法：

我Mage/page/Block/Html/Footer.php controller通过使用中的相同路径重新创建了它app/local folder。

如果不存在，这是要创建的完整路径：

app / local / Mage / page / Block / Html / Footer.php

在此文件中，我添加了Head.php中的函数，这些函数可以在Magento核心的同一文件夹中找到（即Mage / page / Block / Html / Head.php）。

您需要使其正常工作的功能是（显然是完整功能，在这里我只是指出名称以保持简洁）：

public function addItem($type, $name, $params=null, $if=null, $cond=null)
{...}

public function addJs($name, $params = "")
{...}

public function getCssJsHtml()
{...}

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{...}

protected function _separateOtherHtmlHeadElements(&$lines, $itemIf, $itemType, $itemParams, $itemName, $itemThe)
{...}

protected function _prepareOtherHtmlHeadElements($items)
{...}

然后，我将其调用添加到我的自定义（主题中的那个）page / html / footer.phtml中：

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

最后，我现在可以在页脚中添加JS，方法是： 

<action method="addJs"><script>yourscript.js</script></action>
— twi_cy
source
有趣的方法，但这对于Magento体系结构来说是非常非常不正确的方法。
— Benmarks 2014年
— Pratik
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.