Версионность js и css
Часто вижу проблему, что разработчики допускают кеширование браузерами устаревших стилей css и скриптов js. Это всплывает, если разметка обновилась, а стили или скрипты подгрузились старые. Получается что верстка "едет". При этом у разработчиков все хорошо отображается из-за локальных настроек. При этом горе-разработчики рекомендуют всем проверяющим нажимать CTRL+R и CTRL+F5 для того чтобы обновить закешированное содержимое. А вот простые пользователи, которые возвращаются на сайт, видят черти что.
Решить данную проблему очень просто, нужно к пути до скрипта дописывать гет параметром версию файла, например:
//обычное подключение скриптов
<script src="/js/main.js"></script>
//подключение скрипта с учетом версии
<script src="/js/main.js?123456789"></script>
Что дает битрикс?
Битрикс при правильном подключении стилей и скриптов дописывает к пути до файла время обновления файла+размер файла:
<link href="/bitrix/cache/css/s1/main/kernel_main/kernel_main.css?14356674393041" type="text/css" rel="stylesheet">
Как правильно подключать свои файлы js и css?
Добавления стилей и скриптов в <head></head>
Чтобы битрикс выводил вместе со своими стилями и скриптами ваши, их нужно добавлять следующим образом:
$APPLICATION->SetAdditionalCSS('/assets/css/bootstrap-select.css');
$APPLICATION->SetAdditionalCSS('/assets/css/style.css');
$APPLICATION->AddHeadScript('/assets/js/jquery-1.11.2.min.js');
$APPLICATION->AddHeadScript('/assets/js/bootstrap.min.js');
Этот код нужно писать в некешируемой области сайта, например в шаблоне. Если требуется подключать свои стили/скрипты из компонентов, то нужно использовать файл component_epilog.php
Тогда код подключения ваших стилей/скриптов будет генерироваться вместе со стандартными с помощью функции:
$APPLICATION->ShowHead();
При таком подключении ваши стили/скрипты будут участвовать в стандартном объединении и сжатии, на ряду со стандартными. Эта опция включается в настройках главного модуля.
А если нужно подключать скрипты в самом конце страницы, в footer?
Считается, что для более быстрого отображения сайта браузером, тяжелые скрипты и даже не определяющие файлы стилей нужно подключать в самом конце страницы. Об этом пишет, например, валидатор гугла. Теоретически это конечно верно. А вот какой будет толк на практике, вопрос спорный. Тем более, что сами сайты гугла не подходят под свои же требования.
Если не отвлекаться, то в шаблоне сайта, в файле footer.php нужно вместо непосредственно пути до стилей скриптов писать следующее:
<script src="<?= CUtil::GetAdditionalFileURL('/js/jquery.min.js', true); ?>"></script>
Этот код подставит к пути до файла время обновления + размер.
Комментарии:
Bogan87
10.08.2016 13:59:43
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/fix.js");
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/styles/fix.css");
Asset::getInstance()->addString("
<li nk href='http://fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic' rel='stylesheet'
type='text/css'>
");
Оставить комментарий: