Влияет ли большой js код на нагрузку на сайт и его скорость?

Question

[foxel98]

В общем есть файл txt с 800 с чем то категорий и их подкатегорий. Я с помощью js кода вывожу их всех в нескольких списках ul(т.е просто меняю текст в li) но код вышел очень большой(около 3000-3500строк). Будет ли из-за этого сервер выдавать ошибки если на сайт зашло много людей и вообще сильно ли влияет код такого размера на сайт?

Comments

[Модератор]

foxel98 дорогой пользователь, указывайте соответствующие вашему вопросу теги.
Не стоит спамить тегами в надежде, что это увеличит количество просмотров и/или ответов.
Это так не работает и только приведет к удалению ваших вопросов при повторном спаме.

Answer 1

[Евгений Вольф]

Будет ли из-за этого сервер выдавать ошибки если на сайт зашло много людей и вообще сильно ли влияет код такого размера на сайт?

JS код не выполняется на сервере (обычно), по этому на сервер напрямую он никак (обычно) не влияет. Влияет он обычно на скорость работы кленитского устройства.

но код вышел очень большой(около 3000-3500строк)

Объём кода обычно оценивается не по кол-ву строк, а по физическому размеру файла. Думаю, 3-4тыс. строк - это не очень много. К тому же, файл(ы) JS (и CSS) можно минифицировать. Если код написан хорошо - то будет нормально работать даже на слабых клиентских устройствах, например на телефонах. (P.S. Сколько Ваш JS-файл занимает Кб? Он минифицирован? И да, не стоит забывать, что на сервере не редко так же включено сжатие GZip или Brotli, по этому более корректно оценивать размер файла в сжатом виде, а не в исходном).

P.S. Вы можете сами оценить нагрузку на клиентское устройство, скорость загрузки сайт и пр. его параметры в инструментах для разработчика браузера (включаются обычно по нажатия F12).

Comments

[foxel98]

файл весит около 35Кб, но он еще не минифицирован,просто у меня сжатый бустрап весит столько же, поэтому и занервничал что будет перебор)

[Евгений Вольф]

foxel98, не минифицированный и не сжатый - 35Кб - это не много. Как я уже, кажется, говорил выше, Вы можете попробовать файл минифицировать и сжать ZIP'ом (после минификации), с уровнем сжатия по умолчанию (если Windows - обычно это "Правая кнопка мыши -> Отправить -> Сжатая пака ZIP"), получите примерный фактический размер файла, который отдаётся клиенту после сжатия... думаю, там будет килобайт 5-15, что довольно не много :)

Answer 2

[alex-1917]

Это будет влиять на скорость, но сервер тут не причем, у кого послабее комп или древний смартфон, тот будет видеть "Страница была перезагружена... Блаблабла" и так по кругу!

Тут весь нюанс в деталях (вообще-то дьявол, ну пусть нюанс), вы, как и все новички, половину вопроса утаиваете:
1. как понял я - у вас УЖЕ в коде страницы есть этот длинный список и вы скриптом обновляете элементы, не?
2. 3500 строк - это именно 3500 элементов списка <li>blabla</li>, не?

Тогда да, тогда жопа, браузер на декстопе i3 + 16Gb спотыкается на 4000-5000 элементов DOM и это в идеальном случае, в реальности 1000, а дальше одни теории.

Решение тут одно - так как человеческий глаз в принципе не может охватить сразу 3500 элементов, более того, даже сотню охватить не всякий может, то выводите с подгрузкой, с задержкой, все равно никому эти ваши 3500 строк сразу одномоментно не нужны!! хотя если у вас система вывода информации о полете косм. корабля для ЦУПа, тогда возможно)))

Короче, LazyLoad!

Answer 3

[mrxakerrus]

формат передачи данных изменить с txt на json (удобнее для передачи), использовать async defer для загрузки скрипта, а внутри прописать domcontentonloaded (вроде правильно написал, если что в инете поищи, есть еще onload просто и ready), вывод содержимого делать на как статика, как динамика, если используешь список, то при прокрутке подгрузку делать просто..
P.S а теперь конкретный ответ на твой вопрос, да, большой Js влияет на загрузку сайта (3000-3500 строк, ты там что написал то? фреймворки столько даже не используют, так что вперед переделывать с нуля скрипт чтобы все четко работало), на скорость будет влиять, чем меньше используешь пространства, тем лучше, в твоем случае поможет fetch с подгрузкой (либо ajax(сложнее), либо xhr (легко), fetch пока что не так часто используют)) и формат поставь json и при множественном пролистывании вниз страницы, не удаляй элементы, а делай из hidden просто, а когда обратно будешь листать меняй это свойство( лучше все это делать с добавлением класса к элементу). Можешь проверить свой сайт на google pagespeed

Answer 4

[Exploding]

Вставлю-ка и я свои "5 коп": че вы к этим 3-3,5к строкам привязались то все? Вроде бы и взрослые люди, а "длину" "литрами" меряете...
Откуда вы знаете, что этот человек написал в этих 3к js-a что уже даже время лага умудрились высчитали?))
Может быть этот файл содержит просто набор плагинов, которые используются в разных местах сайта!
А уложить нахрен всё можно и парой строк.
Так что кол-во строк js-a вообще глупо брать за входные данные. Тут решает содержание и качество, но уж совсем не колличество строк.
P.S. По вашему, если взять минифицированный плагин и все методы и т.д. натыкать энтеров - изменится время выполнения скрипта? Или безбожно вес файла вырастет до небес?))
Пойду спать.

Comments

[mrxakerrus]

Потому что мы ВСЕ пытаемся помочь человеку, загрузка сайта влияет на ВСЕ, на количество посетителей сайта, на индексацию сайта в поисковом запросе, а если это 3-3.5к строк, то даже плагинами не забить это, я не представляю просто что творится должно на сайте в таком случае, возможно это связано с анимацией и переходом на 3d игры и все прочее, там представляю что можно столько строк кода насобирать, но человек не этим занимается.
P.S 1)ДА, время выполнения скрипта изменяется из-за лишних пробелов, символов и прочего, для этого тебе и в помощь минификаторы 2)да, файл вырастает из-за лишних символов, это ВЕБ-технологии, здесь влияние имеет все что угодно, фреймворки пишутся каждые 5 минут, чем меньше весит сайт, тем более он отзывчив и воспринимается как 60fps страница, мы за продвинутый веб, а не за отсталые технологии, которые будут загружать мобильный телефон и тем самым js будет грузить процессорное время и потреблять в пустую аккумулятор гаджета, даже V8 в браузере не является чем-то совершенным, у него тоже есть проблемы с GC вернее тут уже является утечка памяти, так что ПИШИТЕ код грамотно минифицируйте, в ВЕБЕ важна каждая миллисекунда.

[Exploding]

mrxakerrus,

Потому что мы ВСЕ пытаемся помочь человеку

Это весьма похвально, однако вы считаете, что я тут для других целей?))
Я позволю себе немного уточнений в отношении вашего ответа:

на индексацию сайта в поисковом запросе

Вы наверно хотели сказать: "Релевантность сайта в поисковой выдаче"?

я не представляю просто что творится должно на сайте в таком случае

А вы откройте тот же ПрестаШоп например. 3к покажутся вам каплей в море))

ДА, время выполнения скрипта изменяется из-за лишних пробелов, символов и прочего, для этого тебе и в помощь минификаторы

Не заставляйте меня бить себя по лицу... У меня уже от фейспалмов одни синяки)) Ну пожалуйста, ну просто вдумайтесь немного в смысл...
Ну причем тут вообще 60fps???

так что ПИШИТЕ код грамотно минифицируйте

Вот тут немного не понял, что мне делать, грамотно писать код или грамотно минифицировать? Или просто писать (письма штоле?)? А код, грамотно минифицировать?

А так конечно спасибо за коментарий

[mrxakerrus]

1)да, имелось ввиду релевантность.
2) большинство скриптов так или иначе завязаны на взаимодействии с пользователем и изменением внешнего вида самого сайта (добавление в случае автора вопроса), 60fps является критерием по оценке usability сайта (напишите скрипт скажем для свойств не используемых компоновщиком и проведите тест, результат будет интересным), пробелы бразуер тоже просчитывает, если прочитать рекомендации гугла по разработке сайтов, там это указано, вроде даже на google page speed указывается это как предупреждение. Да и чем меньше весит скрипт, тем быстрее он будет загружен. Мало того, гугл сделал минификатор js кода, просто подумайте, зачем гугл вместо скажем let portCommunicationOnTheServerThrowsException = true; ведет запись let a=true; при этом убирает пробелы, маааагия)
3) пропущена запятая ---- пишите код грамотно, минифицируйте----