Как использовать загрузчик JavaScript, такой как head.js или labjs в Magento

Внезапно Magento поставляется с более чем полдюжиной библиотек JavaScript, которые не помогают с и без того громоздким временем загрузки. Кто-нибудь смог успешно использовать загрузчик скриптов, такой как head.js или labjs, с Magento, чтобы они могли загружаться асинхронно? Я пытался, но не могу заставить его работать.

Кажется, что встроенные скрипты на страницах запускаются до загрузки библиотек. Я знаю, что в head.js есть функция наподобие head.ready, которая сообщает скрипту о выполнении, но встроенных скриптов так много, что не практично добавлять это в каждое вхождение на всем сайте.

3 ответа

Решение

Что касается встроенных сценариев, существует программное решение.

Вы можете написать Обозреватель, который связывает с core_block_abstract_to_html_after или же controller_action_layout_render_before События, которые запускаются непосредственно перед выводом отрендеренного HTML. В вашем Обозревателе вы можете использовать preg_replace вставить head.ready заявление сразу после каждого <script> тег.

Это увеличило бы время рендеринга, но я подозреваю, что это будет меньше, чем задержка загрузки библиотек. И если вы используете полное кэширование страниц, то функция будет вызываться только один раз.

Вы можете использовать встроенный Magento Profiler для проверки воздействия. Стоит попробовать хотя бы.

НТН,
JD

Ну, я использую 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 :(');
    }
);

Все загрузчики такого рода потребуют внесения некоторых изменений в каждый скрипт на вашем сайте. Я знаю - я только что реализовал LABjs в системе, которая, когда я показал grep, показала более 400 файлов с каким-то тегом сценария!!

Другие вопросы по тегам