Производительность JavaScript

Производительность веб-сайта является объективным показателем, а также восприятие и опыт пользователя в процессе загрузки и выполнения.

Производительность веб-сайта - это время загрузки, взаимодействия и ответа сайта, а также гладкость контента в процессе взаимодействия пользователя.

Многие функции могут влиять на производительность, включая задержки, размер приложения, количество узлов DOM, количество отправленных ресурсов, производительность JavaScript, нагрузку на CPU и т.д.

Как повысить производительность веб-сайта?

Уменьшение активности цикла

Указания или присваивания, которые можно поместить вне цикла, сделают его выполнение быстрее.

В следующем примере мы обращаемся к свойству length массива каждый раз при выполнении цикла:

for (let i = 0; i < arr.length; i++) {

В следующем примере мы обращаемся к свойству length вне цикла и делаем цикл быстрее:

let size = arr.length;
for (let i = 0; i < size; i++) {

Повышение эффективности доступа к DOM

Сравнивая с другими JavaScript-утностями, доступ к HTML DOM очень медленный.

Если необходимо несколько раз обращаться к элементам DOM, обратитесь один раз и используйте его в качестве локальной переменной.

Поставьте JavaScript в конце страницы

Поставьте скрипт в конце основного текста страницы, чтобы браузер мог сначала загрузить страницу.

При загрузке скрипта браузер не начнет другие загрузки, и все действия по анализу и рендерингу могут быть остановлены.

Одним из методов является использование в теге scriptdefer="true". ЭтоДеферментацияСвойства атрибута script должны быть выполнены после завершения анализа страницы, но это применяется только к внешним скриптам.

Не используйте ключевое слово «with»

Ключевое слово with считается «полуфабрикатом»,因为它 имеет некоторые очень разочаровывающие недостатки.

Хотя with упрощает процесс обработки локальных свойств, использование with увеличивает издержки поиска переменных в других диапазонах.

В строгом режиме не разрешается использовать ключевое слово.

Минимальное количество HTTP-запросов

Минимизация HTTP-запросов для отображения страницы достигается путем комбинирования внешних файлов и прямого включения JavaScript в HTML-страницу.

Каждый уникальный HTTP-доступ к серверу приводит к значительным задержкам.

Не используйте один и тот же скрипт дважды

Повторяющиеся скрипты могут значительно повлиять на производительность. Повторяющиеся скрипты создадут избыточные запросы по HTTP, особенно в браузере IE.

Не используйте eval()

Хотя этоeval()Функция - это хороший способ выполнения любого кода, но каждый строковый аргумент, передаваемый функции eval, должен быть немедленно解析 и выполнен. Каждый раз, когда достигается вызов функции eval, возникают издержки.