Правильно ли подгружать css и js через php get?

Question

[Леонид Горшков]

Привет,
Я думал как бы уменьшить нагрузку на браузер пользователя и решил загружать css и js через PHP функцией get.
К примеру я создал уже начальную тест страницу, и реализовал эту функцию.
l95863jp.beget.tech
Там можно увидеть что подключается библиотека js кода из файла php с опциейpreload=1

<script src="config/javascripts-libiray.php?preload=1" type="text/javascript"></script>

Тоесть, если мне нужен прелоад (на пример я узнал что компьютер пользователя имеет хорошее интернет соединение),
то выполняю собственно сам скрипт preload=1 или preload=0 ($( \"#load\" ).remove(););

JS (js/preload.js)

window.onload = function() { // Preload page - Загрузка страницы
   $( "#load" ).addClass( "transition-05s opacity-0" ); // Убираем прелоад
   var timerId = setInterval(function() {
      console.log(timerId);
      if( $( "#load" ).css("opacity") == 0){
         clearInterval(timerId);
         delete timerId;
         $( "#load" ).remove() //Удаляем #load
      }
   }, 100);
};

PHP

if(isset($_GET['preload'])){ // preload=1/0 Включить или выключить предзагрузку страниц
      if($_GET['preload']==true){
         echo file_get_contents('../js/preload.js'); # Включенный прелоад
      }elseif($_GET['preload']==false){
         echo "$( \"#load\" ).remove();"; # Выключенный прелоад
      }
   }

Таким образом меняя в ссылке такие значения как (?preload=0&comment=1&check_ip=1) я просто подключаю и выполняю js и css файлы (расположенные в папке js и соответственно css) снижая потребление браузера пользователя.

Это правильное решение? или есть уже более продуманные способы? Заранее спасибо

Comments

[Дмитрий Кузнецов]

Мисье, а вы знаете толк в извращениях!) Не понимаю зачем это сделано, если браузер в любом случае загружает стили и скрипты.

[Леонид Горшков]

Дмитрий Кузнецов, Смотрите.
Загружая библиотеку классов css, я загружаю огромный файл с кучей на данный момент не используемой базой классов. Оно будет сильно жрать на трафик клиента и на скорость загрузки сайта соответственно. А если я укажу какие именно классы мне нужны, то php выдаст мне именно те, что я хочу.

на пример мне нужен класс style2

при загрузке main.css я загружу уйму ненужного

.style { color: #fff; }
.style2{ color: #f0f; }
.style3{ color: #ff0; }
.style4{ color: #0ff; }

при загрузке main.php я загружу что то конкретное

if($_GET['style']=="style2"){echo file_get_contents('../js/style2.css')}

[Дмитрий Кузнецов]

Леонид Горшков, т.е. у вас куча css файлов, которые отвечают за определённый блок на сайте?
Как по мне - лучше загрузить один раз файлы и дальше с ними работать (они же всё равно в кеше остаются). А вашем способом только нагрузка на сервер возрастает.
UPD: Я не уверен что у вас будет особо заметный прирост в производительности.

[Леонид Горшков]

Дмитрий Кузнецов, В мобильных телефонах, когда пользователь полностью закрывает браузер кеш чиститься.
На пк многие обновляют информацию средством ctr+f5/f5

[Дмитрий Кузнецов]

F5 как я помню не чистит кэш, либо чистит, но не всё.

[Yan-s]

Леонид Горшков, а о каких объемах вообще речь? Что насчет gzip?

[Леонид Горшков]

Дмитрий Кузнецов
Проверьте сами.
/config/javascripts-libiray.php?preload=1

С включенной формой загрузки preload=1


С выключенной preload=0

[Леонид Горшков]

Yan-s, Обьемы для собственного движка (на коленке написанный фреймворк, с разным набором js функций и css стилей, для удобства создания проектов клиентам))).
С gzip ни когда не сталкивался.

[Yan-s]

Леонид Горшков,
так может профит того не стоит? И что всё таки насчет кеша? Если пользователь посетит 10 страниц, то без кеша он 10 раз скачает стили.

С gzip ни когда не сталкивался.

странно, если вы переживаете за трафик. Компрессия уменьшит объем в разы (5-7 раз, запросто).

Answer 1

[Interface]

https://webpack.js.org/guides/code-splitting/ почитайте про это, возможно вы хотите в том или ином виде сделать что-то подобное

Answer 2

[Александр]

Просто дополнительная нагрузка на сервер. Клиент все так же должен его загрузить отдельным соединением.

Comments

[Леонид Горшков]

Клиент загрузит его 1 соединением, таким же как если бы он загружал просто js, просто сервер проверит какой js контент именно показывать и даст в место огромного js файла - файл только с нужным js контентом. в место $_get можно использовать CASE, что бы значительно сбавить нагрузку на сервер. А нагрузка на браузер уменьшится же в разы разве нет?

Answer 3

[Кирилл Горелов]

А как вы поняли, что у вас нагрузка и она именно на браузер, а не на сервер?

Comments

[Леонид Горшков]

При выполнении сложный скриптов манипулирующими контентом, не на всех пк будет всё быстро и плавно перемещаться. И что бы не загружать разом огромный файл js, можно просто взять части кода которые тебе нужны и составить в целый js.
Так же со стилями, Если я не использую кучу классов, зачем давить на трафик пользователя, когда можно все нужные стили скомпилировать с помощью сервера?

[Кирилл Горелов]

Леонид Горшков, это как-то сложно.
Можно страницу посмотреть вашу?
Более точно смогу сказать что и как тогда.

Answer 4

[Леонид Горшков]

Как пример. На странице blog.php Я буду использовать ajax выгрузку с базы и js создающий новые div блоки для каждой статьи. Но на странице contact.php мне эти функции не к чему, мне нужны будут функции отправляющие сообщения и тд. Я бы мог все функции упаковать в 1 js файл, и загружать их на каждой странице. Но ведь не лучше будет для каждой страницы извлекать нужное, что бы браузер меньше напрягался загружая это?.

Comments

[Антон Спирин]

Вы "напряг" браузера как и в чем измеряете? Нормальный код бразуер загрузил и закешировал. Ваши же стили и JS всегда будут перегружаться.
Ну и сам факт, что ваш велосипед будет тяжело поддерживать.
В современной разработке есть такой мощный инструмент сборки модулей webpack.
Советую скорей его изучить и не заниматься глупостями.