JavaScript стал де-факто выражением веб-технологий следующего поколения и важным компонентом технологий HTML5, наряду с CSS и JQuery.
JavaScript вездесущ. Он появляется повсюду: на веб-сайтах, в играх, в приложениях, на серверах, в операционных системах, в компьютерном программном обеспечении и в роботах! JavaScript — наиболее часто используемый язык на GitHub, и эта тенденция все еще на подъеме.
Каждый фронтенд-разработчик знаком с JavaScript. Но он может оказаться обоюдоострым мечом, если использовать его без осторожности или опыта. Плохо написанный код JavaScript может замедлить работу вашего веб-сайта, что отрицательно скажется на скорости рендеринга и времени загрузки.
В этой статье мы рассмотрим несколько полезных способов оптимизации производительности вашего кода JavaScript.
1. Избавьтесь от ненужных функций
Чтобы оптимизировать производительность JavaScript, не следует сразу переходить к коду. Вместо этого сначала посмотрите на код и проанализируйте, нужен ли этот код.
Часто на веб-сайтах есть ненужный код JavaScript, который каждый раз загружается вместе с ними. Вы должны избавиться от всего такого кода, который бесполезен для вашего сайта.
Итак, прежде чем переходить к отдельным оптимизациям, вы должны спросить себя, должна ли программа делать все то, что она делает.
2. Используйте HTTP/2
HTTP/2 — это последняя версия протокола HTTP, в которой реализовано несколько замечательных улучшений. Это не только улучшит производительность вашего JavaScript, но и поможет ускорить ваш сайт в целом. HTTP/2 использует мультиплексирование, что позволяет одновременно отправлять несколько запросов и ответов.
Убедитесь, что вы переходите на HTTP/2 как можно скорее, чтобы воспользоваться улучшениями производительности, которые предлагает HTTP/2.
3. Минимизируйте JavaScript
Минификация кода — это метод преобразования JavaScript, чтобы сделать его меньше. Минификация может уменьшить размер файла, чтобы уменьшить время загрузки страницы.
Такие элементы, как разрывы строк, дополнительные пробелы, комментарии и т. д., увеличивают размер файла JavaScript и влияют на скорость страницы. Машины не так чувствительны к визуальному стилю кода, как люди.
Компьютеры могут читать и запускать уменьшенный код, даже если весь ваш Javascript умещается всего в одну строку.
4. Асинхронная загрузка JavaScript
Асинхронная загрузка JavaScript означает, что ваш сайт загружается в многопоточном режиме.
Когда браузер находит строку с ‹script src="some.js"›‹/script›, он останавливает создание моделей DOM и CSSOM во время выполнения JavaScript. По этой причине большая часть кода JavaScript располагается после основного кода HTML.
Давайте посмотрим на пример кода, чтобы понять его лучше:
‹html›
‹голова›
‹script src="sample1.js"›‹/script›
‹/голова›
‹тело›
Этот текст не будет отображаться, пока не будет загружен файл sample1.js.
‹/тело›
‹/html›
Кроме того, вы можете вставить асинхронный тег в JavaScript. Это позволит создавать модель DOM параллельно и не будет прерываться загрузкой и выполнением JavaScript.
‹html›
‹голова›
‹script src="big.js" async›‹/script›
‹/голова›
‹тело›
Этот текст будет присутствовать и не зависит от хода загрузки big.js.
‹/тело›
‹/html›
Будьте осторожны, если ваш JavaScript должен выполнять некоторые манипуляции с HTML или CSS или если вы загружаете скрипт в строгом порядке (например, библиотеки, зависящие от jQuery).
5. Отложите загрузку некритического JavaScript
Ваш сайт должен загружаться быстро, но маловероятно, что все функции должны быть доступны во время первоначальной загрузки/рендеринга страницы. Если пользователь должен выполнить какое-либо действие для выполнения функции, можно отложить загрузку этой функции до момента начальной загрузки страницы и рендеринга.
Таким образом, вы можете избежать загрузки и компиляции кода JavaScript, который может задержать первоначальный рендеринг страницы. Как только страница полностью загружена, она может начать загрузку этих функций, чтобы они были доступны, когда пользователь начинает взаимодействовать. В модели RAIL Google рекомендует выполнять эту отложенную загрузку блоками по 50 мс, чтобы она не влияла на взаимодействие пользователя со страницей.
6. Используйте сжатие Gzip
Gzip — это утилита сжатия данных без потерь, используемая для сжатия и распаковки файлов. Большинство серверов и клиентов сегодня поддерживают gzip.
Когда gzip-совместимый браузер запрашивает ресурс, сервер сжимает ответ перед его отправкой в браузер. Gzip был разработан для сжатия файлов на веб-серверах, сжатия статических (текстовых) файлов до 99% от их исходного размера.
Поскольку JavaScript является текстовым файлом, gzip можно использовать для сжатия файлов JavaScript и последующего уменьшения времени загрузки страницы.
Файлы JavaScript могут быть очень большими. Используя gzip для сжатия файла JavaScript, вы экономите пропускную способность, сокращаете задержку и задержку, а также повышаете общую производительность вашего приложения.
7. Сведите доступ к DOM к минимуму
Взаимодействие с объектами хост-браузера (DOM) за пределами собственной среды JavaScript часто приводит к непредсказуемости и значительному снижению производительности. Это связано с тем, что браузер необходимо обновлять каждый раз.
Общий совет — ограничить доступ к DOM до минимума. Для этого есть несколько хитростей. Например, вы можете уменьшить общее количество обходов DOM, сохраняя ссылки на объекты браузера во время создания экземпляра для последующего использования.
Если вы собираетесь обращаться к элементу DOM несколько раз, лучше сохранить его в локальной переменной. Но помните, если вы удалите значение DOM на более позднем этапе, переменная должна быть установлена на «ноль», чтобы она не вызывала утечек памяти.
8. Кэшируйте!
Кэширование — один из самых простых и лучших способов сократить время загрузки. Убедитесь, что вы используете кэширование браузера, а также промежуточные механизмы кэширования, такие как сеть доставки контента. Это обеспечит быструю загрузку ваших ресурсов как для предыдущих, так и для новых посетителей.
9. Исключите неиспользуемые компоненты библиотек .js
Большинство разработчиков используют библиотеки .js, такие как jQuery UI или jQuery Mobile, по мере их поступления. Это означает, что код включает все компоненты каждой библиотеки, тогда как на самом деле вам может понадобиться только два или три.
Другие библиотеки JavaScript также сталкиваются с похожей ситуацией. Если вы можете управлять тем, какие компоненты будут включены в ваш пакет библиотеки, обязательно сделайте это. Ваш веб-сайт будет загружаться намного быстрее, а ваши посетители получат лучшее впечатление от страницы.
10. Используйте CSS3 вместо JavaScript, если это возможно
Старые версии CSS были не такими мощными сами по себе и требовали JavaScript для создания более сложных эффектов стиля.
Но CSS 3.0 сам по себе чрезвычайно функциональный язык. Он имеет много дополнительных функций, поэтому теперь он требует меньше JavaScript. Еще одним преимуществом использования CSS является то, что CSS можно предварительно скомпилировать, поэтому использование ЦП для CSS ниже, чем для JavaScript.
Заключительные слова
Многие из приведенных выше советов дают вашему JavaScript очень небольшой прирост производительности. Однако при совместном внедрении вы должны заметить значительное улучшение скорости работы вашего веб-сайта/приложения. Чем раньше вы начнете применять эти передовые методы, тем меньше вероятность того, что вы столкнетесь с проблемами производительности JavaScript позже. Поэтому вы должны поддерживать свой собственный список методов оптимизации JavaScript, пока они не станут вашей второй натурой.
Мы надеемся, что эти советы и рекомендации по оптимизации JavaScript были вам полезны. Если вам нужна помощь, мы здесь, чтобы помочь вам оптимизировать ваш сайт!
