Уважаемые пользователи!
Напоминаем, что с 7 ноября 2020 года phpBB Group прекращает поддержку phpBB версии 3.2.
Сайт официальной русской поддержки phpBB Guru продолжит поддержку phpBB 3.2 до 31 декабря 2020 года.
С учетом этого, а также того, что версия 3.2.x больше не будет получать обновлений, за исключением связанных с проблемами безопасности
(только при их наличии и только до 7 ноября 2020 года), рекомендуется обновить конференции до версии 3.3.x.

100500 hover-ов, CSS4 и маленький сюрпраЙз (разгон)

Здесь авторы могут постить бета-версии своих модификаций для phpBB 3.0.x. Внимание! Не устанавливайте бета-версии модов на работающие форумы!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 10594
Стаж: 11 лет 8 месяцев
Откуда: От Москвы 9 часов на Боинге
Благодарил (а): 1521 раз
Поблагодарили: 1317 раз

Re: 100500 hover-ов, CSS4 и маленький сюрпраЙз (разгон)

Сообщение Пчелкин »

xisp писал(а):Почему бы доктайп на HTML5 не заменить?
Да... Менять можно... Даже нужно... Но есть одно но - придется валидовать все ФАЙЛЫ хтмл ПО НОВОЙ С НОВЫМИ ДОСТАТОЧНО СЛОЖНЫМИ ПОДХОДАМИ К ИХ ПОСТРОЕНИЮ... Но можно... Согласен...
xisp писал(а):// <![CDATA[
Не... Не согласен... В корне не согласен.... Маты валидатора без них обеспечены...

Добавлено спустя 22 минуты 29 секунд:
xisp писал(а):Почему бы доктайп на HTML5 не заменить? Ещё минус 94 символа.
Тогда вдогонку можно смело все

Код: Выделить всё

<script type="text/javascript">
заменять на просто

Код: Выделить всё

<script>
Аватара пользователя
xisp
phpBB 3.0.0 RC7
Сообщения: 1798
Стаж: 9 лет 4 месяца
Благодарил (а): 152 раза
Поблагодарили: 215 раз
Забанен: Бессрочно

Re: 100500 hover-ов, CSS4 и маленький сюрпраЙз (разгон)

Сообщение xisp »

Пчелкин писал(а):Но есть одно но - придется валидовать все ФАЙЛЫ хтмл ПО НОВОЙ
Там мало ошибок будет, на самом деле. HTML5 весьма толерантен к оформлению кода
Пчелкин писал(а):Маты валидатора без них обеспечены...
Пример? У меня давно это удалено, валидатор молчит.
Пчелкин писал(а):Тогда вдогонку можно смело все
Тоже верно.
Впрочем, в 3.1 это (кроме ховеров) уже сделано.
phpBBex
Аватара пользователя
Mouse
phpBB 2.0.0
Сообщения: 221
Стаж: 9 лет 7 месяцев
Благодарил (а): 101 раз
Поблагодарили: 6 раз

Re: 100500 hover-ов, CSS4 и маленький сюрпраЙз (разгон)

Сообщение Mouse »

Супер! Как всегда и все от Пчелкина.
Страницы с длинными постами и кучами фоток в них летааать начали :D
Последний раз редактировалось Татьяна5 16.09.2014 9:08, всего редактировалось 1 раз.
Причина: Убрала лишнее цитирование
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 10594
Стаж: 11 лет 8 месяцев
Откуда: От Москвы 9 часов на Боинге
Благодарил (а): 1521 раз
Поблагодарили: 1317 раз

Re: 100500 hover-ов, CSS4 и маленький сюрпраЙз (разгон)

Сообщение Пчелкин »

xisp писал(а):Пример? У меня давно это удалено, валидатор молчит.
А действительно... ликсы не нужны во всех четырех браузерах...
В доктайпе под HTML5 достаточно и такое оставить -

Код: Выделить всё

<script>
ТУТ ФИГНЯ ВСЯКАЯ
</script>
Вдобавок вместо таких строк

Код: Выделить всё

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
можно оставлять их такими -

Код: Выделить всё

<script src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
убирая

Код: Выделить всё

type="text/javascript" 
(в блокноте это делается автозаменой за секунду...)
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 10594
Стаж: 11 лет 8 месяцев
Откуда: От Москвы 9 часов на Боинге
Благодарил (а): 1521 раз
Поблагодарили: 1317 раз

Re: 100500 hover-ов, CSS4 и маленький сюрпраЙз (разгон)

Сообщение Пчелкин »

Поглядывая краем глаза на Мудрого PageSpeeda, задался целью разобраться вот с этой его частью...
02032.jpg
Но посмотрев внимательно на те несчастные цЫфЫрки, решил: да на фиг надо морочить серое... Разницы никто не почувствует и не ощутит... Нехай грузятся все оптом... Решил, закрыл и забросил...
Но я немного неправильно подумал об этом гниде - PageSpeede. Этот урод с тех пор постоянно делал вот так -
Изображение
Сны становились все кошмарней и кошмарней. Нервы не выдержали и произошел срыв... Нажрался как свинья. Потом стало стыдно за державу... Дело дошло до этого -
Изображение
Врубил плагин и полез..... Все было на месте. Все маты PageSpeed присутствовали в тех-же местах.

Ну что ж. Придется опять лезть в ХТМЛ вики и иже подобные места... Полез, начитался, наиспробовался, наэкспериментировался и наконец - то "оно пришло неожиданно" и было очень похоже на предмет, который Алка называла пипецом... -
Изображение

А теперь, собственно к решению проблемы, которую подкинул этот чертов PageSpeed.
Из великих трудов:
Как отложить синтаксический анализ JavaScript
Рано или поздно большинство веб-мастеров озадачивается вопросом оптимизации сайта для его быстрейшей загрузки.
Все утилиты, анализирующие скорость загрузки сайта, выдают ряд рекомендаций о том, что нужно сделать для быстрейшей загрузки. Более подробно работа с этими утилитами будет рассмотрена в отдельной статье, сейчас же хотелось бы коснуться лишь одного пункта, - откладывание синтаксического анализа JavaScript.

Получив от плагина сообщение "При начальной загрузке страницы выполняется синтаксический анализ JavaScript в объеме ????Кб. Чтобы ускорить отображение страницы, отложите синтаксический анализ JavaScript", начинающие веб-мастера впадают в ступор: "как его отложить-то?!?"
Видим перед собой список JavaScript
В каком файле и как расположен тот или иной JavaScript нам поможет как всегда БЛОКНОТ++ с его великолепным Гошой поиском.
А мы рассмотрим решение на основе сразу нескольких JavaScript, расположенных в файле "ГОЛОВЫ" - overall_header.html
И что у нас там? А там вот такая картинка:

Код: Выделить всё

<script src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.fancybox.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/tooltip.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/swfobject.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/scripts.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/ccat.js"></script>
<!-- IF S_IN_PWD_GEN -->
<script src="{T_SUPER_TEMPLATE_PATH}/jqueryui.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/jrumble.js"></script>
<!-- ENDIF -->
<!-- IF ENABLE_COMMENTS and F_SENDCOM -->
<script src="{T_SUPER_TEMPLATE_PATH}/js/jquery-ui.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/js/comments.js"></script>
<!-- ENDIF -->
<!-- IF 0 -->
<script src="{T_SUPER_TEMPLATE_PATH}/slidermenu/slider.js"></script>
<!-- ENDIF -->
<!-- IF SCRIPT_NAME == "image_page" or SCRIPT_NAME == "comment" or (S_QUICK_REPLY and S_SHOW_ATTACH_BOX) -->
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.form.js"></script>
<!-- ENDIF -->
<!-- IF S_VIEWFORUM or S_INDEX -->
<script src="{T_SUPER_TEMPLATE_PATH}/crawl.js"></script>
<!-- ENDIF -->
<!-- IF S_VIEWTOPIC -->
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.timers.js"></script>
<!-- ENDIF -->
Сразу скажу - не копируйте это себе!!! Это только лишь пример.... Понятно что человек произошел от обезьяны, но к phpBB это не имеет никакого отношения. Тут другие законы.
И вот этому всему попробуем устроить рассинхрон при загрузке этого всего с кеша сервака браузерами....
Ну, прежде всего, посмотрим внимательно на Js обложенные условиями... По большому счету они нам не интересны. Так как, зная коды условий, можно понять что это -

Код: Выделить всё

S_IN_PWD_GEN
вызывается только при смене пароля, это

Код: Выделить всё

IF ENABLE_COMMENTS and F_SENDCOM
при написании комментов, а это только тогда, когда где-то включено...
Ну что, делаем вывод что все JavaScript под условиями нам не интересны, так как они страницей(ами) вместе со всем ее ХТМЛ и КСС не вызываются... Ну, хоть что-то успокаивает.
Стоп!!!!! А это что -

Код: Выделить всё

IF S_VIEWFORUM or S_INDEX
??? Это означает: "при просмотре списка тем и главной... Значит это тоже наш клиент...
В итоге получаем такой список:

Код: Выделить всё

<script src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.fancybox.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/tooltip.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/swfobject.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/scripts.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/ccat.js"></script>
<!-- IF S_VIEWFORUM or S_INDEX -->
<script src="{T_SUPER_TEMPLATE_PATH}/crawl.js"></script>
<!-- ENDIF -->
<!-- IF S_VIEWTOPIC -->
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.timers.js"></script>
<!-- ENDIF -->
Вот вызов и подгрузку именно этих JavaScript и будем рассинхронизировать для примера, а вы в это время будете ТАКОЕ ЖЕ ДЕЛАТЬ С подобными JavaScript из того идиотского списка идиотского PageSpeeda... :P
Нам советуют вот это для использования:

Код: Выделить всё

<script type="text/javascript">
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = '<путь к файлу>';
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, <количество миллисекунд после загрузки документа>)}
</script>
Именно это рассинхронизатор и используем. Что делаем в первую очередь? В первую очередь надо определить реальное время загрузки страницы, на которой используются все эти JavaScript, то есть - той, на которой вы запустили великолепный PageSpeed. Раскоментив дебаггер и рефрешнувшись мы видим время (например) - 1.250 сек.
Теперь надо определить время загрузки этой же страницы , НО БЕЗ ВСЕХ УКАЗАННЫХ В СПИСКЕ того PageSpeeda скриптов JavaScript. Это сделать легко - трем все выбранные для рассинхрона строки с JavaScript, чистим пять кешей и перезагружаем страницу. Что мы видим? А мы видим время (например) - 0.485 сек. Во те на!!!! Выбранные нами скрипты отнимают у сервака и браузера почти целую секунду (все как пример)!!!! Но зато теперь мы знаем, что таймеры рассинхрона надо распределить между 0.5 сек и 1.2 сек. Другими цифрами между 500 и ... А вот тут мы впали в ступор, а что же со следующей цифрой? А ничего!!!! Про нее просто надо забыть... Так как мы организуем рассинхрон!!! И распределим его по нарастанию всего 5 милисекунд.
И так. Поехали дальше и подробненько...
Возвращаем удаленное в файл и начинаем над ним колдовать...
Первое, что нам попалось на глаза -

Код: Выделить всё

<script src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
Кланяться в ножки этому "святому" квери мы не будем и отправляем его в первый аут. В итоге, вместо строки

Код: Выделить всё

<script src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
Получаем -

Код: Выделить всё

<script>
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = '{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js';
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 505)}
</script>
Для гарантии выполнения "правил phpo" замените предложенные одиночные скобы на двойные, что в итоге дает нам это:

Код: Выделить всё

<script>
         function onLoadScript () {
             var scri = document.createElement("script");
             scri.src = "{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js";
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 505)}
</script>
Циферку 505 видели? Мы добавили 5 милисеков к основному времени загрузки страницы.
Продолжаем издеваться над выбранными JavaScript далее и в итоге получаем вместо прежнего куста файла:

Код: Выделить всё

<script src="{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.fancybox.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/tooltip.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/swfobject.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/scripts.js"></script>
<script src="{T_SUPER_TEMPLATE_PATH}/ccat.js"></script>
<!-- IF S_VIEWFORUM or S_INDEX -->
<script src="{T_SUPER_TEMPLATE_PATH}/crawl.js"></script>
<!-- ENDIF -->
<!-- IF S_VIEWTOPIC -->
<script src="{T_SUPER_TEMPLATE_PATH}/jquery.timers.js"></script>
<!-- ENDIF -->
Такую красоту:

Код: Выделить всё

<script>
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = "{T_SUPER_TEMPLATE_PATH}/jquery-1.7.2.min.js";
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 505)}
</script>
<script>
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = "{T_SUPER_TEMPLATE_PATH}/jquery.fancybox.js";
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 510)}
</script>
<script>
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = "{T_SUPER_TEMPLATE_PATH}/tooltip.js";
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 515)}
</script>
<script>
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = "{T_SUPER_TEMPLATE_PATH}/swfobject.js";
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 520)}
</script>
<script>
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = "{T_SUPER_TEMPLATE_PATH}/forum_fn.js";
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 525)}
</script>
<script>
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = "{T_SUPER_TEMPLATE_PATH}/scripts.js";
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 530)}
</script>
<script>
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = "{T_SUPER_TEMPLATE_PATH}/ccat.js";
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 535)}
</script>
<!-- IF S_VIEWFORUM or S_INDEX -->
<script>
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = "{T_SUPER_TEMPLATE_PATH}/crawl.js";
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 540)}
</script>
<!-- ENDIF -->
<!-- IF S_VIEWTOPIC -->
<script>
         function onLoadScript () {
             var scri = document.createElement('script');
             scri.src = "{T_SUPER_TEMPLATE_PATH}/jquery.timers.js";
             document.body.appendChild(scri);
         }
         window.onload = function () {setTimeout(onLoadScript, 545)}
</script>
<!-- ENDIF -->
Заливаем файл на сервак, чистим пять кешей и перезагружаем страницу....
Мать твою!!! Дебаг все равно показываем 0.5 сек, а скрипты все подгрузились и все работает. Вот это фокус!!!!! И где те чертовы 1.250? А они ушли на дальний кордон... Но самое главное - нас похвалил PageSpeeda
02033.jpg
Последний раз редактировалось Пчелкин 11.07.2015 10:06, всего редактировалось 1 раз.
Аватара пользователя
romaamor
phpBB 3.0.0 RC6
Сообщения: 1722
Стаж: 9 лет 5 месяцев
Откуда: Одесса
Благодарил (а): 581 раз
Поблагодарили: 141 раз

Re: 100500 hover-ов, CSS4 и маленький сюрпраЙз (разгон)

Сообщение romaamor »

Пчелкин, жжош. Уважаю.
Аватара пользователя
xisp
phpBB 3.0.0 RC7
Сообщения: 1798
Стаж: 9 лет 4 месяца
Благодарил (а): 152 раза
Поблагодарили: 215 раз
Забанен: Бессрочно

Re: 100500 hover-ов, CSS4 и маленький сюрпраЙз (разгон)

Сообщение xisp »

Пчелкин писал(а): а скрипты все подгрузились и все работает.
Да вот не всегда. Особенно с жквери я был осторожен. Тестируй всю яваскрипт- функциональность, легко могло что- то поломаться.
В 3.1 который ты не любишь с этим хорошо из коробки, разве что файлов стилей много.
phpBBex
Аватара пользователя
Пчелкин
phpBB 3.3.0
Сообщения: 10594
Стаж: 11 лет 8 месяцев
Откуда: От Москвы 9 часов на Боинге
Благодарил (а): 1521 раз
Поблагодарили: 1317 раз

Re: 100500 hover-ов, CSS4 и маленький сюрпраЙз (разгон)

Сообщение Пчелкин »

В моем примере он все равно сААААмый первый... Успевает подгружаться всего через 0,005...
Но с другой стороны - ты на 100 % прав... Его лучше не трогать... Не хай тянется вместе со всем мусором синхронно... Не велика потеря...

ПыСы... На следующем уроке мы поговорим об оптимизации файлов КСС. :oops:

Вернуться в «Бета-версии модов для phpBB 3.0.x»