Все более-менее сложные сайты и другие веб-проекты обязательно имеют подключенный JavaScript. От корректности написания скриптов зависит не только работоспособность того или иного функционала на страницах, но и скорость работы всего сайта в целом. Поисковые системы и пользователи относятся гораздо лояльнее к проектам, чьи страницы загружаются быстро даже при плохом соединении с интернетом. Добиться этого можно оптимизацией JavaScript скриптов на сайте или приложении.
Как оптимизировать JavaScript на сайте
Благодаря использованию JavaScript страницы сайта становятся более динамичными и функциональными. Однако, чем больше предусмотрено функционала и динамики в проекте, тем больше скриптов нужно написать и подключить к нему, что может создавать нагрузку. Хороший разработчик всегда ищет возможности оптимизации JS-скриптов на страницах своего проекта.
Оптимизации можно добиться разными способами - от прогонки скриптов через специальные сервисы, которые сокращают код, до изначального продумывания минимизации скриптов. Приведенные ниже советы можно использовать как по отдельности, так и группировать их между собой для достижения большей эффективности. Рекомендуется использовать хотя бы половину из них для заметной оптимизации JavaScript-кода на страницах проекта.
Объявляйте несколько переменных в одной строке
Многие разработчики задают каждую новую переменную на отдельной строке, при этом для задания новой переменной в таком случае приходится повторно прописывать ключевое слово, например, let. Задание новых переменных на новой строке с одной стороны делает код более читабельным для разработчиков, но с другой увеличивает количество символов и время обработки скрипта. Для небольшого проекта это совсем не заметно, а вот в более крупном уже может вызывать видимую просадку в скорости работы.
Пример укороченного написания переменных в JS
JavaScript позволяет писать несколько переменных в одну строку. Используйте эту возможность. Желать начать “правильно” писать переменные с самого начала работы над проектом. Так вы сэкономите и свое время на разработку, и сможете повысить производительность сайта. Конечно, все переменные не обязательно записывать в одну строку. Их можно разделить по категориям, например, в одной строке будут переменные отвечающие за один компонент, в другой за второй и так далее. Такой код и удобно читать разработчикам и нагрузки он создает чуть меньше.
Присваивайте значение нескольким переменным правильно
Этот совет вытекает из предыдущего. Многие, даже опытные разработчики, если и пишут название переменных в одну строку, то значение могут присвоить на разных, например, вот так:
let var1, var2, var3;
var1 = 1;
var2 = 2;
var3 = 3;
Так, конечно, немного лучше, чем задавать кажду переменную на отдельной строке, но это тоже не идеальная записи. Сократить ее можно с помощью массивов. Если прописывать переменные вместе со значениями в одну строку, то это тоже немного поможет в оптимизации JS-кода. Приведенный выше пример можно записать таким образом:
let [var1, var2, var3] = [1, 2, 3];
Похожим образом можно работать и с объектами, только вместо квадратных скобок использовать фигурные.
Пример укороченного написания объектов в JS
Использование альтернативных конструкций if-else
Оператор if и конструкции, с ним связанные часто используются для задания проверок и логических операций. В таких случаях их часто можно сократить, написав вместо ключевых слов только пару операторов. Также их использование позволяет записывать условия в одну-две строки, вместо сложных конструкций, которые используются при написании через стандартные if-else.
Например, вот таким образом можно задать проверку для переменной на Null и undefined всего в одну строку:
if (test1 !== null || test1 !== undefined || test1 !== '')
Однако и это не идеальный вариант - новые версии JavaScript автоматически проводят подобную проверку переменных перед выполнением той или иной функции, поэтому всю конструкцию можно было бы записать вот так:
if (test1)
В приведенном примере оператор if самостоятельно проведет проверку и приведет переменную к логическому значению.
Использовать логические операторы вместо if
Использование логических операторов || и && позволяет записывать код проверки того или иного логического условия гораздо короче. Порой большую конструкцию можно записать всего в одну строку, что в крупном объеме позволяет значительно оптимизировать код.
Использование логических операторов вместо if в JS
Также вместо стандартных проверок можно активно использовать тернарные операторы, что позволяет писать большие проверку в одну-две строки.
Укорочение цикла for
Стандартный вид цикла for имеет громоздкую структуру по умолчанию, которую тоже можно и нужно оптимизировать. Это стало сделать гораздо проще благодаря нововведениям в последних версиях JavaScript. Например можно использовать такую запись:
for (let i of testData)
Также в некоторых случаях вместо стандартного цикла for можно использовать функциональный метод forEach. Он тоже позволяет делать более короткую запись, плюс, его удобнее читать. Однако данный вариант записи все равно имеет некоторые ограничения. Например, перебор массива методом forEach нельзя прервать с помощью инструкции break.
Упрощайте математические операции
Для преобразования строк в числа можно использовать оператор сложения, как в этом примере:
let var1 = +'123';
let var2 = +'12.3';
Оптимизировать можно некоторые математические операции:
- ** - возведение числа в степень. Пример записи: 2**3 - возведение числа 2 в степень 3;
- ~~ - округление чисел. Примечательно, что округление происходит в этом случае в меньшую сторону, например, ~~1.9 будет 1, а не 2.
Записывать данные операции двумя символами быстрее, чем писать название метода, плюс, это помогает оптимизировать код, если в нем подразумевается использование большого количества математических операций.
Также можно оптимизировать некоторые числа с большим количеством нулей на конце. Например, число 1000000 можно записать как 1e6.
Присваивание значений объектам
Можно отказаться от присваивания значений объектам, если имя свойства совпадает с именем переменной. Это позволяет избежать ненужных дублей, а также сократить время на написание кода.
Общие советы по оптимизации кода JavaScript
Приведенные выше советы касались непосредственно процесса написания кода. По отдельности они вряд ли дадут серьезную оптимизацию, поэтому нужно стараться комбинировать несколько представленных советов для достижения лучшего результата. Дальнейшие рекомендации носят в большей степени общий характер, но они тоже способны сильно помочь в оптимизации JS-скриптов на сайте.
Продумывайте кэширующие механизмы
JS-скрипты часто могут использоваться для доступа к какому-то элементу сайта. Если разработчик изначально предусмотрит возможность сохранения данных сайта в кэше браузера пользователя, то получится меньше обращений, плюс, уменьшится и время на выполнение операций. Сделать кэширование можно двумя вариантами:
- JavaScript-API Cache - работает за счет API и связанных онлайн-сервисов, его легко настраивать, но есть некоторая зависимость проекта от работы сторонних сервисов, находящихся удаленно;
- HTTP-кэш - работает за счет использования только браузера пользователя, точнее его кэша. Настроить немного сложнее, зато этот метод является более надежным.
Очищайте код
Этот совет касается не только оптимизации, которая рассматривалась в блоке советов выше, но и подробного планирования функционала сайта, анализа пользовательской активности в дальнейшем, оптимизации некоторых функций. Если на сайте есть функционал, который устарел или не почти не используется пользователями, то его лучше всего вычистить из JS-кода проекта полностью. Дело в том, что даже неиспользуемый код создает нагрузку, что уменьшает отзывчивость страницы.
Еще рекомендуется оптимизировать операции, которые пользуются спросом пользователей. Например, процесс регистрации можно упростить, когда вместо заполнения большой формы и ее проверки, пользователь может, например, авторизоваться через уже созданный аккаунт в какой-нибудь социальной сети. Таким образом получится “убить двух зайцев” - оптимизировать код и сделать сайт более дружелюбным для пользователей.
Также не забывайте следить за развитием технологий. Сам JavaScript время от времени совершенствуется, плюс, еще быстрее совершенствуются библиотеки для него и появляются новые. Через некоторое время вам может потребоваться доработать код для функционала сайта с использованием новых решений. Обычно они как раз направлены на оптимизацию. Правда, к новинкам нужно подходить выборочно, так как некоторые из них вместо желаемой оптимизации могут сделать код еще более тяжелым.
Предусмотрите отложенную загрузку для второстепенных скриптов
Вряд ли для корректной работы веб-страницы нужно сразу загружать сразу весь JavaScript-код. Продумайте отложенную загрузку скриптов. Они не должны загружаться со страницей вместе, а только в том случае, если пользователь совершит какое-то действие на странице, например, нажмет кнопку. Если бы скрипт загрузился вместе со страницей, а пользователь бы не нажал кнопку, то ничего бы не произошло, а страница грузилась бы немного дольше. Если же скрипт будет подгружаться только после действия пользователя на странице, то пользователю, возможно, придется подождать лишнюю секунду-другую, пока выполнится действие. Это все равно намного лучше, чем если бы ему пришлось ждать эти пару секунд, пока полностью загрузится страница.
Если подойти к отложенной загрузки контента на странице комплексно, то можно будет избежать загрузки и компилирования браузером большого объёма JS-кода в самом начале работы. Благодаря этому страницы сайта будут быстрее загружаться. Также Google и Яндекс отдают больший приоритет при ранжировании поисковой выдачи проектам с высоким уровнем оптимизации, даже обычный пользователь ее вряд ли заметит.
Обычно разработчики предусматривают механизм, когда сначала загружается сама страница и ее основной функционал, а только потом весь JavaScript-код без совершения каких-либо действий со стороны пользователя. В коде можно настроить время, через которое будут подгружаться скрипты при отложенной загрузке. Google рекомендует устанавливать задержку в 50 мс. За это время обычно основной контент страницы уже прогрузился, а пользователь пока не успел совершить никаких действий. Единственный возможный недостаток - некоторая анимация может подтормаживать, если она вынесена на главный загрузочный экран.
Устраните возможные утечки памяти
Если в проекте наблюдается утечка памяти, то браузере будет запрашивать у компьютера пользователя больше памяти, создавая дополнительную нагрузку. Сайт может работать очень плохо на устройствах с ограниченным объемом оперативной памяти. Обычно подобная проблема встречается на страницах, содержащий интерактивный элемент для просмотра видео или изображений, например, слайдер или собственный видеоплеер.
Проанализировать сайт на утечки памяти можно с помощью встроенного в браузер Google Chrome инструментария для разработчиков. Делается это во вкладке Perfomance. Таким образом разработчик получит информацию, где именно наблюдается утечка памяти и сможет предпринять действия для ее устранения. Очень желательно перед окончательным запуском проекта проверить его на возможные утечки памяти и все их устранить или хотя бы минимизировать.
Ограничьте использование глобальных переменных
Глобальные переменные будут существовать на протяжении всего скрипта, утяжеляя его работу на странице. Они удобны, когда нужно задать какую-то переменную, которая используется в коде постоянно, однако злоупотреблять ими не нужно. Лучше большинство переменных делать локальными, которые будут удаляться из памяти после выполнения какого-то определенного участка скрипта. Это позволит избежать ненужной нагрузки.
Правда и локальные переменные нужно использовать корректно. Если они значение одной локальной переменной повторяется слишком часто в коде, то разумнее будет переопределить его в одну глобальную, нежели постоянно прописывать локальные переменные с одним и тем же значением.
Мониторьте производительность
Некоторые проблемы оптимизации можно обнаружить только после запуска сайта. Используйте для этих целей специализированные инструменты. Очень хорошо, если вы сможете наладить обратную связь с пользователями, чтобы они быстро сообщали об обнаруженных проблемах. Иногда недоработки в оптимизации скриптов видны только при определенной нагрузке на ресурс со стороны пользователей.
Мониторинг производительности JS
Однако для более корректного анализа производительности JS-скриптов на проекте рекомендуется пользоваться сторонние сервисы. Lighthouse и Google PageSpeed неплохо зарекомендовали себя. Они помогут понять, где есть просадки в производительности.
Заключение
В реальных проектах JavaScript-разработчик, да и бэкендер или фуллстак должны в обязательном порядке продумывать оптимизацию кода. Степень ресурсов, которые потребуется в нее вложить зависит от проекта. Если это небольшой проект, то вполне будет достаточно просто пользоваться правилами написания короткого JS-кода и сделать отложенную загрузку элементов. В более крупных проектах уже этого может быть недостаточно и потребуется полноценная техническая поддержка, которая будет искать учетки, устранять их, обновлять функционал в соответствии с последними техническими решениями библиотек JavaScript, да и самого языка программирования.
Добавить комментарий: