Foren / National / Russian / Модули и плагины / Выборочная загрузка ресурсов CSS и JS

...или ускоряем загрузку страниц.

Macik
#1 30. April 2010, 07:46

Team
Thanked: 181 mal

Чтобы проще и глубже вникнуть в суть проблемы - зайдите на главную страницу cotonti.com и нажмите "Ctrl-U" (или иную комбинацию, которая позволит просмотреть исходный код страницы).
Смотрим секцию <head></head>. Ничего не смущает? Лично меня тут смущает и напрягает куча не нужных (особенно на главной) скриптов и загрузок.

Давайте глянем:
skins/sed-light/sed-light.css
js/jquery.js
js/base.js
./plugins/chili/js/jquery.chili.js
./plugins/chili/js/jquery.chili.toolbar.js
./plugins/chili/lang/jquery.chili.toolbar.ru.lang.js
./plugins/chili/skins/jquery.chili.toolbar.css

<script type="text/javascript" > 
//<![CDATA[
  [тут вырезана настройка Чили]
//]]>

./plugins/tpltags/style.css
./plugins/slimbox/css/slimbox2.css
./plugins/slimbox/js/slimbox2.js
./plugins/slimbox/js/jquery.jScale.js
	<script type="text/javascript"> 
	//<![CDATA[
  [тут вырезана настройка СлимБокс]
	//]]>
	</script> 
./plugins/tags/style.css

На главной (в зависимости от ваших задач) необходимо только:
skins/sed-light/sed-light.css - однозначно нужен
js/jquery.js - в принципе нужен, особенно если на главной используются какие-либо дополнит. JQuery плагины
js/base.js - 7 кб разнообразных специфических функций, возможно для главной можно и удалить
./plugins/tags/style.css - надо, т.к. Тэги используются практически повсеместно (хотя в таком случае резонно перенести в основной файл).
SlimBox и его скрипты - удалил, т.к. в данном случае на главной он похоже не используется.
Итого из ~ 30 строк кода нам реально нужна (для данной страницы) загрузка 4-5 файлов.
А теперь представьте, что какой-нибудь плагин использует еще 2-3 файла JS/CSS и это тоже оказывается в шапке главной страницы.

Резюмируя: описания в заголовке страницы сильно избыточны и должны меняться в зависимости от загружаемой страницы.

У кого какие мысли?

Я частично вышел из положения таким образом:

1. Подредактировал плагины Chili и markitup так, чтобы они загружались только на необходимых мне страницах - для меня это:
chili - только на pages.php
markitup - pages.php и forums.php
(делается это правкой файлов *.header.php для каждого из плагинов)

2. Написал небольшой плагин автозагрузчик ресурсов для собственных плагинов.
Работает следующим образом: плагин цепляется на header.main с Order=13 (чтобы выполнялся после остальных плагинов) и обрабатывает специальный подготовленный массив, в котором указаны какие файлы надо грузить и на каких страницах и по каким условиям.
Как формируется этот массив? Да очень просто - для нужного плагина создается *.header.php,
Цепляем header.main с Order=10 (обычно его и ставят). Далее в нем пишем примерно такой код (специально разнообразил вариантами):

$plug_name = 'slideshow'; // имя текущего подопытного плагина
if ($e==$plug_name) { // чтобы загрузка файла сработала только для этого плагина
  $header_loads[] = array(
    'file' => "./js/jquery.timers.js",
    'type' => 'JS'
  );
}

  // загрузка сработает для стороннего плагина
  $header_loads[] = array(
    'part' => 'plug' 
    'code' => 'contactus', // сработает в плагине 'contactus'
    'file' => "./js/jquery.slider.js",
    'type' => 'JS'
  );

  // загрузка файла произойдет только в админке в разделе Утилиты IP Search
  $header_loads[] = array(
    'part' => 'tools' 
    'code' => 'ipsearch', // сработает в соотв. плагине 
    'file' => "./js/jquery.slider.js",
    'type' => 'JS'
  );
  
  // Указанный файл будет подгружаться на всех страницах
  $header_loads[] = array(
    'part' => 'all' 
    'code' => '',
    'file' => "./js/wonderfull.css",
    'type' => 'CSS'
  );

  // Указанный файл будет подгружаться на странице с альясом "howto"
  $header_loads[] = array(
    'part' => 'param' 
    'code' => 'al=howto',
    'file' => "./js/wonderfull.css",
    'type' => 'CSS'
  );

  // загрузка файла произойдет на всех страницах сайта, кроме тех, когда определены перечисленные константы
  $header_loads[] = array(
    'part' => '!def' 
    'code' => 'SED_PLUG,SED_INDEX,SED_PFS,SED_POLLS,SED_USERS', // не грузимся в плагинах,главной,ПФС и т.д.
    'file' => "./plugins/chili/js/jquery.chili.js",
    'type' => 'JS'
  );

В идеале - на любой странице сайта у нас загружаются только те ресурсы (JS/CSS), которые необходимы именно для этой страницы.

Вот как-то так. Надеюсь не очень сумбурно.
Если будет интерес могу поделиться плагином.
https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F
jcrush
#2 30. April 2010, 08:30

Contributors
Thanked: 3 mal

Да такое по умолчанию должно быть, я давно об этом говорю, часть так же перенес css в основной, библиотеку jquery гружу с яндекс сервера.

+
сделать фитчу как в ДЛЕ автоматическое сжимание явы и стилей зипом и вывод их одним файлом, т.е. склеить на лету.
SEO блог: http://blog.stfw.ru/
esclkm
#3 30. April 2010, 11:50

Team
Thanked: 76 mal

эх... а я бы делал бы загрузку хедера после боди...
оче6нь яркий пример описан выше.
еще пример: ЛС - открываешь непрочитанное в хедере оно еще непрочитанное - а в футере его уже прочитали
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
Trustmaster
#4 30. April 2010, 21:15

Administrators
Thanked: 265 mal

А в большинстве модулей (точнее, во всех) у нас значительная часть боди выполняется до хедера и так, надо только это правильно использовать. Решение по объединению JS/CSS в кеш-файлах в стадии обдумывания реализации, кое-какие идеи есть. Вообще говоря, "идеального универсального решения" этой проблемы не существует, поскольку априори движок не может знать обо всех хотелках любого произвольного запроса, а апостериори может получиться чрезмерная избыточность и нерациональное использование ресурсов.
May the Source be with you!
terracota
#5 29. September 2010, 23:47

Members
Thanked: 3 mal

У меня тоже есть множество идей по улучшению движка, я, пожалуй, присоединюсь. По вышесказанному: можно подгружать нужное через Yass. Это довольно интересное решение, но требует знаний и умений, которыми я пока не обладаю :) А вот хотя бы ознакомиться с этим решением очень рекомендую.
Логика и здравый смысл творят чудеса.
Logic and Sanity makes a real magic happens.
esclkm
#6 30. September 2010, 04:36

Team
Thanked: 76 mal

зачем нам Yass ??? Это медленоватая пародия на jquery не более
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
terracota
#7 30. September 2010, 13:43

Members
Thanked: 3 mal

И как давно вы в последний раз на него смотрели?

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

Ну и, знаете, медленной она уж никак не выглядит.
Логика и здравый смысл творят чудеса.
Logic and Sanity makes a real magic happens.

Dieser Beitrag wurde von terracota (am 30. September 2010, 13:49, vor 14 Jahre) bearbeitet
esclkm
#8 1. Oktober 2010, 17:07

Team
Thanked: 76 mal

а зачем сразвнивать Jquery 1.3 когда уже полгода есть 1.4 - в которой производительность возрасла вдвое?
Зачем надо 2 библиотеки, которые выполняют одно и тоже\?
и чем отличается это:
<script src="yass.js" type="text/javascript" class="yass-module-jquery"></script>
от этого:
<script src="yass.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>

я просто не вижу преимущества. Остальные примеры остались для меня так же весьма сомнительными.
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
Macik
#9 12. Januar 2011, 02:47

Team
Thanked: 181 mal

# Trustmaster : А в большинстве модулей (точнее, во всех) у нас значительная часть боди выполняется до хедера и так, надо только это правильно использовать. Решение по объединению JS/CSS в кеш-файлах в стадии обдумывания реализации, кое-какие идеи есть. Вообще говоря, "идеального универсального решения" этой проблемы не существует, поскольку априори движок не может знать обо всех хотелках любого произвольного запроса, а апостериори может получиться чрезмерная избыточность и нерациональное использование ресурсов.

1. На сколько я понимаю пока нет полной унификации того, в какой последовательности выполняются части (модули) движка если полагаться на хуки.

Я имею в виду что header.main выполняется раньше "парсинга" страницы или тела плагина, и это на мой взгляд логично. А вот при обработке утилит (tools) сначала система обрабатывает основной код плагина (утилиты с хуком tools), а уже потом берется за header. Тут получается обратная логика.

2. Есть ли в последних версиях какой-либо стандартный механизм загрузки файлов через заголовок HTML файла, кроме как править $out['compopup'] через хук header.main ? (Я имею в виду вставку ссылок в секцию <HEAD> для загрузки CSS и JS файлов).

В догонку:
3. Зачем во многих плагинах (например Tags, Search, Markitup) используется такая запись (в файлах *.header.php):
Hooks=header.main
Tags=header.tpl:{HEADER_COMPOPUP}

Я имею в виду указание тега {HEADER_COMPOPUP}, если по факту плагины его не используют? А на прямую пишут в $out['compopup'] ?
https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F

Dieser Beitrag wurde von Macik (am 12. Januar 2011, 04:58, vor 14 Jahre) bearbeitet
Trustmaster
#10 12. Januar 2011, 05:40

Administrators
Thanked: 265 mal

1. На данный момент (0.9) порядок выполнения хуков такой:
  1. input, global
  2. module.first (для модулей), module.main (для модулей), standalone (для плагинов)
  3. header.first, header.main, header.tags
  4. module.tags (для модулей)
  5. footer.first, footer.main, footer.last

2. В Сиене этот вопрос решён, правда способом далеко не самым простым и без документации разобраться будет непросто. Но если кратко, есть 2 способа вывода JS и CSS кода:
  1. Непосредственный. Почти как раньше, только вместо переменной $out['compopup'] используются функции cot_rc_link_file() и cot_rc_embed().
  2. В область кеша. Такие ресурсы добавляются в кеш с помощью специальных функций cot_rc_add_file() и cot_rc_add_embed() в специальном хуке rc. Это позволяет движку разделять их на несколько областей видимости, а также группировать их и выводить в сжатом виде, не перегружая при этом сервер слишком частой ресурсоёмкой минификацией скриптов и стилей.

3. Чтобы было ясно, что без этого тега работать не будет, хоть и используют они его только косвенно.
May the Source be with you!
esclkm
#11 12. Januar 2011, 06:00

Team
Thanked: 76 mal

еще у нас есть такая штука Order=1 - которая устанавливает порядок загрузки плугов
littledev.ru - мой маленький зарождающийся блог о котонти.
снижение стоимости программирования и снижение стоимости производства разные вещи. Первое можно скорее сравнить с раздачей работникам дешевых инструментов, чем со снижением зарплаты
Macik
#12 12. Januar 2011, 07:20

Team
Thanked: 181 mal

# Trustmaster : 1. На данный момент (0.9) порядок выполнения хуков такой:
{Skipped...}
2. В Сиене этот вопрос решён
{Skipped...}
3. Чтобы было ясно ...
{Skipped...}

Спасибо за развернутый ответ.


Глянул мельком Сиену - суперически!
Спасибо, что прикрутили использование CDN при загрузке jQuery.
Если можно было еще указать в настройках (без правки кода) с какого CDN грузить - было бы вообще супер. (см. например http://api.yandex.ru/jslibs/libs.xml#jquery)

Изучаю функции работы с подгружаемыми ресурсами.

зы: отписал в соотв. топике о некотором баге в админке. (http://www.cotonti.com/forums.php?m=posts&id=27871) Проявляется только в Google Chrome.

update: Буду признателен, если потом появится некоторый "How to" по функциям загрузки ресурсов, наподобие страницы про AJAX функции (http://www.cotonti.com/docs/en/developer/ajax_helpers) - все c примерами, четко и доходчиво. Спс.
https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F

Dieser Beitrag wurde von Macik (am 12. Januar 2011, 07:29, vor 14 Jahre) bearbeitet
jcrush
#13 20. Februar 2011, 13:31

Contributors
Thanked: 3 mal 

<!-- IF {PHP.usr.id} = 0 -->{HEADER_COMPOPUP}<!-- ENDIF -->
Как то так...
SEO блог: http://blog.stfw.ru/