http://www.d-it.ru/

JavaScript в подвале шаблона

  • JavaScript в подвале шаблона

    Антон Долганин 29 Июня 2016 8:00 12908
    С некоторых пор стало правильным размещать JS в конце страницы, дабы он не тормозил рендеринг страницы. В Битрикс для этих целей появилась кнопка "Переместить весь JS в конец страницы". Но она мне не нравится, так как снижает производительность (за счет парсинга страницы), поэтому я делаю следующим образом.

    Цель поста не вау-эффект, так как ничего такого тут нет, а скорее делюсь подходом максимально правильного решения.

    Ну во-первых, чтобы не отходить от канонов, все JS и CSS шаблона сайта я регистрирую все равно в шапке. Так привычнее:

    Screenshot_1.png


    Затем, вверху header.php и footer.php я определяю простую переменную: 
    $bScriptInFooter = !$USER->isAuthorized();


    Как уже догадались, это условие "перемещение" скриптов вниз страницы. Почему не всем перемещать можно? Потому что при показе админ.панели мне не удалось добиться ее работоспособности при скриптах в футере. В целом, это условие вы можете доработать и под себя. Например, перемещать вниз страницы в том числе и для обычных посетителей.

    Дальше все просто. В header.php я пишу: 
       <? 
   $APPLICATION->ShowCSS();
   if (!$bScriptInFooter) {
      $APPLICATION->ShowHeadStrings();
      $APPLICATION->ShowHeadScripts();
   }  
   ?>


    А в footer.php 
    <?
if ($bScriptInFooter) {
   $APPLICATION->ShowHeadStrings();
   $APPLICATION->ShowHeadScripts();
}
?>


    Вот и вся магия. Да. стоит заметить, что все дополнительные JS внутри компонент я регистрирую также через addHeadScript и addHeadString.
    Комментариев: 12
Адриан
29 Июня 2016 11:15
Добрый день, а чем отличается <?=SITE_TEMPLATE_PATH?> от SetAdditionalCSS и AddHeadScript?

P.S. и пожалуйста, можете показать пример как создать такую форму добавление комментарий как у вас
Ссылка
Антон Долганин
30 Июня 2016 8:30
Добрый день, а чем отличается <?=SITE_TEMPLATE_PATH?> от SetAdditionalCSS и AddHeadScript?
Вы про размещение просто сразу ссылки script=src?  Именно штатные SetAdditionalCSS и AddHeadScript позволяют собрать JS/CSS в кучу и вывести их в нужном месте. Это раз.

Два - они отслеживают изменения в файле, меняя метку файла, чтобы у пользователей не закешилась старая версия.

Три - это позволяет соединять JS в один файл настройками главного модуля.

Штатные методы SetAdditionalCSS и AddHeadScript  обязательны к применению.  
Родитель Ссылка
Сергей
1 Июля 2016 7:25
Антон, а есть ли принципиальная разница - через $APPLICATION->.*  или через 
use Bitrix\Main\Page\Asset;
Asset::getInstance()->addCss(...);   
Asset::getInstance()->addJs(...);


Просто Вы, насколько я читал - используете D7, а здесь именно через $APPLICATION. Или это просто в демонстрационных целях?
Ссылка
Сергей
1 Июля 2016 7:27
Блин, что-то парсер накосячил. Прошу прощения. Я думаю всё-равно понятно, что я имел ввиду?
Родитель Ссылка
Антон Долганин
1 Июля 2016 7:55
Да, скорее чтобы понятнее всем было, про какие методы я речь веду :) так конечно - только D7 по возможности.
Родитель Ссылка
Павел
5 Июля 2016 8:23
Не знаю как сейчас,  скорее всего ничего не поменялось, реализация подключения js и CSS на D7 не сильно лучше старого варианта. По крайней мере так было зимой.
Родитель Ссылка
Александр
3 Августа 2016 7:04
Насколько помню, там внутри у SetAdditionalCSS используется тот же Asset::getInstance()->addCss
Так что без разницы
Родитель Ссылка
Денис
5 Июля 2016 18:08
Кажется, Вы забыли упомянуть, что для такого подхода требуется перебрать все шаблоны и все упоминания о script загнать в AddHeadString.
Иначе, первое же обращение к Битриксовым JS или к JS шаблона вызовет ошибку.
Например, размещенный в шапке сайта sale.basket.basket.line
Ссылка
Антон Долганин
6 Июля 2016 6:14
Спасибо, замечание верное. Потому что я подразумевал подход только в новых проектах :)
Родитель Ссылка
Антон
8 Июля 2016 21:43
Для работы админ-панели ShowHeadStrings() оставил в шапке, а ShowHeadScripts() переместил в подвал
Ссылка
rivetweb
3 Августа 2016 7:54
> Но она мне не нравится, так как снижает производительность (за счет парсинга страницы)думаю что с новым режимом Автокомпозита.

подход теперь имеет мало смысла. там же все кешируется на уровне целых страниц и ресуры тратятся только при генерации кешированной страницы. нет?
Ссылка
Антон Долганин
3 Августа 2016 8:46
Если вы про композит - то да, там единая страница раз генерится.
Родитель Ссылка