Переместить все Javascript включает в себя до </ body>

35

Кто-нибудь знает, как сделать все теги JS-скриптов Magento, например, <script type="text/javascript" src="http://sitename.com/js/prototype/prototype.js"></script>отрисовывать перед закрытием </body>?

Я пробовал это однажды раньше, но мне выдали ошибку, которая, по-моему, была похожа на метод addJS, недоступный там, где я его использовал, возможно, в ссылочном нижнем колонтитуле.

— Марк Уэстон
источник

4

Возьмите рекомендации GTMetix и YSlow с щепоткой соли. Время, которое вы потратите на это, не приведет к заметному увеличению производительности, и почти наверняка лучше потратить его на профилирование вашего кода (просто лишний раз) или просто на поиск лучшего / более быстрого хоста.

— Бен Лессани - Сонасси

1

@sonassi Будучи верным моментом, потратить полчаса на реализацию ответа JMax не повредит ничему и является частью набора улучшений производительности внешнего интерфейса, которые можно включить в базовую тему.

— Гл

1

@Glo Мы все за повышение производительности. Но «выгоды», которую это принесет, просто не существует. Первая загрузка страницы - это единственный раз, когда JS будет загружен и после этого будет обслуживаться из кэша браузера. Блокировка при начальной загрузке, скорее всего, будет медленной генерацией PHP, чем доставка JS; и даже тем не менее, транзит сервера или подключение пользователей на последней миле будут играть большую роль в том, сколько времени потребуется для фактического отключения.

— Бен Лессани - Сонасси

1

@sonassi Это все равно, что сказать, что вы должны игнорировать пользователей при первом посещении, потому что у них скоро будет заполненный кэш. Конечно, есть улучшения PHP, которые можно и нужно предпринять, но, как фронтендер, я должен беспокоиться о том, как я могу не только ускорить доставку ресурсов, но и воспринимать время загрузки для пользователя и загружать сценарии внизу. страница, предотвращающая блокировку рендеринга, является частью этой стратегии. Современные браузеры могут обрабатывать скрипты без блокировки, но вы знаете, как и я, миллисекунды == £ £ в электронной коммерции. Конечно, это вообще спорный вопрос с загрузчиками скриптов.

— Glo

Я с @Glo, это небольшая часть настройки эффективности, и она может не иметь значения для дня и ночи, но это не следует игнорировать. Очень важно быстро выводить контент на экран для первого посетителя.

— STW

22

Это зависит от вашего запроса. Например, наконец, я удалил все скрипты Prototype из Homepageмагазина Magento, с которыми у меня не возникло никаких проблем. Но, как я уже сказал, это зависит от вашей темы, расширений и т. Д.

Для перемещения скрипта:

Найдите следующую строку в 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') ?>

— Огуз Челикдемир
источник

ты уверен, что core/text_listесть addJs()метод?

— Алекс

Вы правы @Alex, я ошибся, извините за это!

— Огуз Челикдемир

Ура человек, это работает. После того, как я приступил к работе, я ожидал сказать, что когда у вас запущено слияние JS, оно все равно сводит это на нет, потому что объединенный файл затем добавляется к голове, но на самом деле Magento, похоже, сделал в моем тесте: создайте два объединенных файла, по одному для каждого блока page / html_head, и объединенный файл для нижнего колонтитула js будет добавлен перед «</ body>». Это потенциально полезно. У меня были некоторые проблемы со слиянием JS и jQuery, которые не включали jQuery.noConflict. Теперь у меня есть слияние JS с js до того, как </ body> 'может быть полезным.

— Марк Уэстон

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>

— Джозеф в SwiftOtter
источник

Отмечено @ Oğuz Çelikdemir правильно, потому что он предоставил более подробный ответ, который работает, но вы в основном дали тот же ответ, так что большое спасибо, что он работает.

— Марк Уэстон

2

По какой-то причине вы используете фреймворк javascript, фактически несколько. Они должны быть резидентами на ранней стадии для правильного отображения страницы. Есть причины включать определенные javascript-коды до конца тела. Если вы не понимаете этого и слепо толкаете все это на дно, вы занимаетесь программированием культа грузов. Установка небольшого сарая с помощью фиктивного радио и гарнитур часто делается с помощью Magento, а иногда людьми, которые должны быть опытными веб-разработчиками. Некоторые вещи принадлежат именно там, где они были размещены.

— Fiasco Labs

15

В Magento 1.x это глупое поручение. В файлах шаблонов в Magento просто слишком много встроенных скриптов, которые могут сломаться, если вы переместили основные файлы JS из <head>. Потенциально в Magento 2 эта ситуация изменится, но она находится между Prototype и jQuery, когда Magento мигрирует из Prototype.

Для других сценариев вы должны поместить их перед </body>элементом. Я считаю полезным игнорировать <action method="addJS|addItem">XML Magento и просто создавать новый файл шаблона для каждого скрипта, который включает в себя простую ссылку на скрипт HTML, например:

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

Затем вы можете встроить этот файл шаблона в любое место (и все еще использовать до / после для управления порядком) следующим образом:

<block type="core/template name="jquery.hobbiton" after="-" template="custom/jquery/hobbiton.phtml" />

— Брендан Фальковски
источник

6

Перемещение внешнего JavaScript в низ недостаточно в большинстве случаев. Если вы используете какие-либо шаблоны со встроенным JavaScript, как в темах по умолчанию, вам нужно будет отложить их выполнение до тех пор, пока не будут загружены все зависимости (prototype.js, varien.js, ...).

Подход состоит в том, чтобы извлечь все встроенные <script>элементы из визуализированных блоков с помощью наблюдателя http_response_send_beforeи переместить их в конец сразу после внешних сценариев. Пока вы это делаете, вы можете перемещать все элементы скрипта, не только встроенные. Это избавляет вас от необходимости перемещать их через макетную модель, которая явно не была предназначена Magento.

Том Робертшоу создал расширение, которое делает именно это, с одним наблюдателем, который изменяет HTML-ответ с помощью регулярных выражений: https://github.com/bobbyshaw/magento-footer-js

Он использует core_block_abstract_to_html_afterсобытие, но принимает меры только в том случае, если текущий блок является корневым блоком. Это означает, что наблюдатель вызывается чаще, но он должен в некоторой степени использовать блочное кэширование.

— Фабиан Шменглер
источник

Расширение Robertshaw действительно хорошо работает по всему сайту, за исключением панели оплаты корзины OPC. Полностью заглушает панель. Я думаю, что это скрипт проверки платежного шлюза. Он перемещает все вниз только перед закрывающим </body>тегом.

— Fiasco Labs

2

Я настоятельно рекомендую модуль mediarox pagespeed, чтобы помочь вам оптимизировать ваш javascript (и css) и улучшить рейтинг в Google Pagespeed.

Он работает путем анализа html-вывода Magento, а затем выполняет действие вырезания и вставки кода, чтобы переместить javascript в конец html-кода. Процесс быстрый, но лучше всего его использовать в сочетании с полным кэшем страниц для кэширования изменений HTML.

Более подробная информация о том, как работает этот модуль и может помочь вам повысить рейтинг страницы, здесь:

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

— PAJ
источник

-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 - Вот и все!

— Марсио Масиэль
источник

-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.

Вот полный путь, который будет создан, если не существует:

приложение / местные / Mage / страница / 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)
{...}

Затем я добавляю на свою страницу (в моей теме) / html / footer.phtml вызов для этого:

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

В конце я теперь могу добавить JS в нижний колонтитул, вызывая его в любом макете

<action method="addJs"><script>yourscript.js</script></action>

— twi_cy
источник

Интересный подход, но это очень, очень неправильный подход для архитектуры Magento.

— отметки

github.com/pratikmage/magento-defer-javascript

— Pratik