Перемістити всі включені Javascript до раніше </body>

35

Хтось знає, як мати всі теги скриптів Magento JS, наприклад, <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, це невеликий фрагмент настройки ефективності, який може не змінити ніч і день, але це не слід ігнорувати. Швидке отримання вмісту на екрані для відвідувача, який вперше відвідує важливе значення.

— STW

22

Це залежить від вашого запиту. Наприклад, нарешті, мені було видалено всі скрипти прототипів із 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>

Створіть файл шаблону в застосунку / дизайн / frontend / [пакет] / [тема] /template/page/html/jsfooter.phtml та поставте наступне

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

Додайте нижче у свій шаблон безпосередньо перед закриттям </body>тегу.

<?php echo $this->getChildHtml('jsfooter') ?>

— Oğuz likelikdemir
джерело

Ви впевнені, що core/text_listмає addJs()метод?

— Алекс

ви праві @Alex, я помилився, вибачте за це!

— Oğuz Çelikdemir

Привіт людино, це працює. Те, що я насправді очікував сказати після початку роботи, - це те, що, коли у вас відбувається злиття JS, це все одно це заперечує, оскільки об'єднаний файл потім додається до голови, але насправді те, що, схоже, зробив Magento в моєму тесті створити два об'єднані файли, по одному для кожної сторінки / блоку html_head, а об’єднаний файл для js нижнього колонтитулу додається перед '</body>'. Це потенційно корисно. У мене виникли проблеми зі злиттям JS та jQuery, які не включали jQuery.noConflict. Тепер у мене злиття JS працює js перед тим, як "</body>" може бути корисним.

— Марк Вестон

20

З переміщенням тегу є дві проблеми. Найбільша проблема полягає в тому, що чомусь Magento вводить багато <body/>тегів JS, залежних від прототипу, безпосередньо в тег. Переміщення сценаріїв до кінця документа (хоча це добре для завантаження), розбиває багато сторінок у 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, насправді кілька. Для належного відображення сторінок вони мають бути записані на ранній стадії. Є підстави включати певні javascripts до кінця тіла. Якщо ви цього не розумієте і сліпо пересуваєте все донизу, ви займаєтесь культовим програмуванням вантажів. Налаштування невеликого сараю з підставним радіо і навушниками робиться багато з Magento, а іноді і людьми, які, як вважається, досвідченими веб-розробниками. Деякі речі належать саме там, де він був розміщений.

— Лабораторії Фіаско

15

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

Для інших сценаріїв слід розмістити їх перед </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>тегом.

— Лабораторії Фіаско

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.

Ось повний шлях, який слід створити, якщо його немає:

app / local / Mage / сторінка / Блок / 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