Иногда встречается такое мнение:
Подумаешь, 500кб JS. Это ерунда в современном мире. Одна картинка весит столько же, а на странице несколько таких картинок.
Дело в том, что 500кб JS не равны 500кб изображения с точки зрения процесса обработки ресурсов браузером. Размер файлов одинаковый, но влияние на производительность разное.
Тяжёлые изображения не блокируют основной поток, отрисовку и HTML-парсер. Браузер продолжает разбирать документ, искать ресурсы и рисовать пиксели на экране, пока изображения загружаются.
Если изображения находятся ниже начальной области отображения, их можно загружать лениво. Браузер не будет их скачивать, пока они не окажутся в пределах области просмотра. JS тоже можно загружать лениво, но это более сложная задача.
После загрузки изображение нужно декодировать и ресайзить. Последнее не требуется, если исходные размеры соответствуют размерам блока. Декодирование происходит очень быстро, выполняется на видеокарте и не блокирует поток.
С JS происходит больше операций. После загрузки его нужно разобрать и проверить синтаксис. Далее код нужно скомпилировать в набор низкоуровневых инструкций для дальнейшего выполнения. Эти операции требуют времени.
Так как в JS можно вызвать редирект на другую страницу, дописать в поток парсера новую разметку, обращаться к узлам DOM и модифицировать их, браузер приостанавливает отрисовку и парсер, пока обрабатывает JS.
Общее время блокировки основного потока при выполнении JS известно как Total Blocking Time, а задачи длительностью более 50мс известны как Long Tasks. Оба явления приводят к подтормаживанию интерфейса и ухудшают отзывчивость.
При выполнении JS может возникнуть ошибка. Если HTML и CSS толерантны к ошибкам и продолжают работать, то ошибки в JS приводят к полной остановке дальнейшего выполнения.
Из-за ошибок в JS интерфейс может утратить функциональность. В случае SPA пользователи увидят белый экран. При ошибке во время загрузки изображения функциональность не утратится, а вместо изображения отобразится alt-текст, который можно стилизовать.
Не смотря на одинаковый размер исходных файлов изображения и JS, у последнего больше влияния на загрузку страницы, больше точек отказа и хуже последствия при возникновении ошибки.
#performance #js