Узнайте, как ускорить свои веб-страницы, изменив JavaScript, чтобы устранить узкие места.
JavaScript жизненно важен для веб-разработки. Язык стоит за большей частью интерактивности и анимации, которые вы увидите на веб-сайтах. Но JavaScript также может привести к замедлению работы веб-сайта, если код написан плохо. Неэффективность может привести как к плохому времени загрузки, так и к низкой скорости рендеринга.
Используйте следующие методы, чтобы повысить скорость и производительность вашего веб-сайта.
1. Определяйте переменные локально
Как программист, вы должны знать как работает область видимости. В JavaScript есть два типа переменных: локальные переменные и глобальные переменные.
Локальные переменные — это переменные, объявленные внутри функционального блока. Область остается внутри функции только в которой они объявлены. Глобальные переменные — это переменные, доступные в скрипте. В случае с глобальными переменными область действия остается на протяжении всей программы.
Всякий раз, когда вы пытаетесь получить доступ к переменной, браузер выполняет нечто, известное как поиск области действия. Он проверяет ближайшую область видимости переменной и продолжает поиск, пока не найдет переменную. Таким образом, чем больше у вас цепочки областей видимости в вашей программе, тем больше времени потребуется для доступа к переменным за пределами текущей области.
По этой причине лучше всегда определять ваши переменные ближе к контексту выполнения. Используйте глобальные переменные только в редких случаях; например, когда вы хотите сохранить данные, используемые в скрипте. Это уменьшит количество областей действия в вашей программе, тем самым повысив производительность.
2. Загружать JavaScript асинхронно
JavaScript — это однопоточный язык программирования. Это означает, что после выполнения функции она должна выполняться до конца, прежде чем сможет выполняться другая функция. Эта архитектура может привести к ситуациям, когда код может заблокировать поток и заморозить приложение.
Чтобы поток работал хорошо, вы должны запускать определенные задачи, отнимающие много времени, асинхронно. Когда задача выполняется асинхронно, она не использует всю вычислительную мощность потока. Вместо этого функция присоединяется к очереди событий, где она запускается после выполнения всех остальных кодов.
Вызовы API идеально подходят для асинхронного шаблона, поскольку для их разрешения требуется время. Таким образом, вместо того, чтобы задерживать поток, вы должны использовать библиотеку на основе обещаний, такую как fetch API, для асинхронной выборки данных. Таким образом, другой код может выполняться, пока браузер извлекает данные из API.
Разберитесь в тонкостях асинхронного программирования, и вы улучшите производительность своего приложения.
3. Избегайте ненужных циклов
Использование циклов в JavaScript может быть дорого, если вы не будете осторожны. Циклический просмотр коллекции элементов может сильно нагрузить браузер.
Хотя вы определенно не можете избежать циклов в своем коде, вам нужно как можно меньше работать с ними. Вы можете использовать другие методы, которые избегают необходимости зацикливаться на коллекции.
Например, вы можете сохранить длину массива в другой переменной, а не читать ее во время каждой итерации цикла. Если вы получаете то, что хотите от петли, немедленно вырваться из нее.
4. Минимизировать код JavaScript
Минификация — это эффективный метод оптимизации кода JavaScript. Минимизатор преобразует ваш необработанный исходный код в меньший производственный файл. Они удаляют комментарии, обрезают ненужный синтаксис и сокращают длинные имена переменных. Они также удаляют неиспользуемый код и оптимизируют существующие функции, чтобы они занимали меньше строк.
Примерами минимизаторов являются Google Closure Compiler, UglifyJS и минимизатор Microsoft AJAX. Вы также можете вручную минимизировать свой код, проверяя его и ища способы его оптимизации. Например, вы можете упростить операторы if в вашем коде.
5. Сжимайте большие файлы с помощью Gzip
Большинство клиентов используйте Gzip для сжатия и распаковки большие файлы JavaScript. Когда браузер запрашивает ресурс, сервер может сжать его, чтобы вернуть в ответ файл меньшего размера. Когда клиент получает файл, он распаковывает его. В целом, этот подход экономит полосу пропускания и уменьшает задержку, повышая производительность приложений.
6. Свести к минимуму доступ к DOM
Доступ к DOM может повлиять на производительность вашего приложения, поскольку браузер должен обновляться при каждом обновлении DOM. Лучше ограничить доступ к DOM минимально возможной частотой. Один из способов сделать это — сохранить ссылки на объекты браузера.
Вы также можете использовать библиотеку, такую как React, которая вносит изменения в виртуальный DOM, прежде чем отправлять их в реальный DOM. В результате браузер обновляет части приложения, которые нуждаются в обновлении, вместо обновления всей страницы.
7. Отложите ненужную загрузку JavaScript
Хотя очень важно, чтобы ваша страница загружалась вовремя, не все функции должны работать при начальной загрузке. Предположим, у вас есть нажимаемая кнопка и меню вкладок, которые ссылаются на код JavaScript; вы можете отложить оба до тех пор, пока страница не загрузится.
Этот метод высвобождает вычислительную мощность, позволяя вовремя отображать необходимые элементы страницы. Вы откладываете компиляцию кода, который может содержать начальное отображение страницы. Затем, как только страница завершит загрузку, вы можете начать загрузку функций. Таким образом, пользователь может наслаждаться быстрой загрузкой и вовремя начинать взаимодействовать с элементами.
Вы также можете включить наименьшее количество CSS и JavaScript в свой элемент head, чтобы он сразу загружался. Затем вторичный код может находиться в отдельных файлах .css и .js. Эта техника требует хорошего знания как работает ДОМ.
8. Используйте CDN для загрузки JavaScript
Использование сети доставки контента помогает ускорить загрузку страниц, но не всегда эффективно. Например, если вы выберете CDN без локального сервера в стране посетителя, они не выиграют.
Чтобы решить эту проблему, вы можете использовать инструменты для сравнения нескольких CDN и решить, какая из них обеспечивает наилучшую производительность для вашего варианта использования. Чтобы узнать, какой CDN лучше всего подходит для вашей библиотеки, ознакомьтесь с cdnjs Веб-сайт.
9. Устранение утечек памяти
Утечки памяти могут негативно сказаться на производительности приложения. Утечки происходят, когда загруженная страница занимает все больше и больше памяти.
Пример утечки памяти — когда ваш браузер начинает тормозить после продолжительного сеанса работы с приложением.
Вы можете использовать инструменты разработчика Chrome для обнаружения утечек памяти в вашем приложении. Инструмент записывает временную шкалу на вкладке производительности. Многие утечки памяти происходят в результате удаления элементов DOM. Сборщик мусора освобождает память только тогда, когда все переменные, ссылающиеся на эти элементы, выходят за пределы области видимости.
Такие инструменты, как Lighthouse, Google PageSpeed Insights и Chrome, могут помочь вам обнаружить проблемы. Lighthouse проверяет доступность, производительность и проблемы SEO. Google PageSpeed может помочь вам оптимизировать JavaScript для повышения производительности вашего приложения.
Браузер Chrome предоставляет функцию «Инструменты разработчика», которую можно включить, нажав клавишу F12 рядом с вашим ключевым словом. Вы можете использовать его анализ производительности, чтобы включать и выключать сеть и проверять потребление ЦП. Он также проверяет другие показатели, чтобы выявить проблемы, влияющие на ваш сайт.
Как веб-разработчик, вы будете много работать в своем веб-браузере. Большинство браузеров поставляются с набором инструментов разработчика, которые помогут вам устранить проблемы с веб-сайтом. Функция инструментов разработчика Google Chromes имеет множество функций, которые помогут вам.
