如何在Magento中使用像head.js或labjs这样的JavaScript加载器

Question

Magento自带六个以上的JavaScript库，这会使加载时间更加缓慢。有人能够成功地使用脚本加载器（如head.js或labjs）与Magento一起异步加载吗？我一直在尝试，但无法使其正常工作。看起来似乎页面上的内联脚本会在库加载之前触发。我知道head.js有一个像head.ready这样的函数来告诉脚本执行，但是由于整个站点中内联脚本太多了，将其添加到每个出现的位置并不实际。

- Matthew Dolman

Answer 1

关于内联脚本，有一个编程解决方案。您可以编写一个观察者，绑定到core_block_abstract_to_html_after或controller_action_layout_render_before事件，这些事件在输出呈现的HTML之前立即触发。在您的观察者中，您可以使用preg_replace在每个<script>标记后立即插入一个head.ready语句。

这将增加一点呈现时间，但我认为它会比下载库的延迟少。如果您正在使用完整页面缓存，则该函数仅会被调用一次。

您可以使用内置的Magento Profiler测试其影响。至少值得一试。

希望对您有所帮助，

JD

- Jonathan Day

---

这看起来很有前途，我会尝试并回报。 - Matthew Dolman

Answer 2

我使用jQuery实现这个功能，并且效果很好。
您需要做的是发出一个ajax请求来获取脚本，然后使用eval评估该脚本。您可以编写自己的函数实现此功能，但是jQuery已经提供了一些不错的方法。
对于单个脚本，$.getScript函数非常适用。它基本上是$.ajax函数的扩展，指定您正在请求一个脚本。语法如下：

$.getScript('my_script_url',function(){
    // do whatever needs to be done after the script loads
    alert('my script was asynchroniously loaded');
});

如果你有更多的脚本需要通过ajax添加，jQuery有一种很棒的方法来实现这个目的：

$.when(
    $.getScript("/script_1.js"), 
    $.getScript("/script_2.js"), 
    $.getScript("/script_3.js")
    // ...
    //$.getScript("/script_n.js")
).then(
    // on succes
    function(){
        alert('good to go!');
    },
    // on failure
    function(){
        alert('loading failed. one or more scripts encountered a problem :(');
    }
);

- gion_13

---

谢谢，这个方法解决了Magento中大量内联脚本的问题吗？这种方法会让<script>标签中的所有内容等待库加载完毕吗？ - Matthew Dolman

抱歉，它不是那样工作的。你不能强制脚本不执行，但你可以编写你的代码，以便在加载所有库之后才执行你的逻辑。 - gion_13

不幸的是，Magento已经为我编写好了（而且在这种情况下似乎很糟糕），所以似乎没有绕过这个问题的办法 :( 感谢您的回复。 - Matthew Dolman

这种方法需要与我之前所说的所有方法一样的东西——修改页面上所有现有脚本，使其符合所选择的方法。 - JAAulde

Answer 3

所有这类加载器都需要对站点上的每个脚本进行一些修改。我知道——我刚在一个系统上实现了LABjs，当我使用grep命令搜索时，显示出有超过400个文件带有某种脚本标记！！

- JAAulde