Узнайте, как ускорить свои веб-страницы, устранив узкие места в JavaScript.
JavaScript важен в веб-разработке. Большая часть действий и движений на веб-страницах контролируется языком.
Но если код написан плохо, JavaScript может замедлить работу веб-сайта.
Недостатки могут привести к медленной загрузке, а также к низкой скорости рендеринга.
Следуйте следующим стратегиям, чтобы повысить скорость и производительность вашего сайта.
- Локально определить переменные
- JavaScript должен загружаться асинхронно
- Избегайте лишних циклов
- Минимизируйте код JavaScript
- Используйте Gzip для сжатия больших файлов
- Уменьшить доступ к DOM
- Отложить ненужную загрузку JavaScript
- Используйте CDN для загрузки 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.
Эта стратегия требует четкого понимания того, как работает DOM.
8. Используйте CDN для загрузки JavaScript
Использование сети доставки контента может помочь ускорить загрузку страницы, но не всегда успешно.
Например, если вы выберете CDN, у которого нет локального сервера в стране посетителя, они не выиграют.
Чтобы решить эту проблему, вы можете использовать инструменты для оценки многих CDN и решить, какая из них обеспечивает наибольшую производительность для вашего варианта использования.
Посетите веб-сайт cdnjs, чтобы узнать, какой CDN лучше всего подходит для вашей библиотеки.
9. Уменьшите утечки памяти
Утечки памяти могут снизить производительность приложения.
Утечки происходят, когда загружаемая страница использует все больше и больше памяти.
Утечка памяти происходит, когда ваш браузер начинает тормозить после продолжительного сеанса работы с программой.
Утечки памяти в вашем приложении можно обнаружить с помощью инструментов разработчика Chrome.
Временная шкала записывается инструментом на вкладке производительности. Следующие утечки информации происходят в результате удаления элементов DOM.
Когда все переменные, ссылающиеся на эти элементы, больше не находятся в области видимости, сборщик мусора освободит память.
10. Используйте инструменты для обнаружения проблем
Lighthouse, Google PageSpeed Insights и Chrome могут помочь вам в обнаружении проблем.
Lighthouse ищет проблемы с доступностью, производительностью и SEO.
Google PageSpeed может помочь вам сократить количество JavaScript, чтобы увеличить время загрузки вашего сайта.
В браузере Chrome есть функция «Инструменты разработчика», которую можно активировать, нажав клавишу F12 рядом с вашим ключевым словом.
Вы можете использовать его анализ производительности для включения и выключения сети и проверки использования ЦП.
Он также проверяет другую статистику, чтобы исправить области вашего сайта.
Как устранить неполадки с помощью инструментов разработчика Google
Как веб-разработчик, вы будете проводить много времени в своем браузере.
В большинстве браузеров есть набор функций разработчика, которые могут помочь вам устранить ошибки веб-сайта.
Функция «Инструменты разработчика» в Google Chrome может помочь вам в решении различных задач.
