От автора: как и любая программа, программа на JavaScript может работать медленно, если мы не будем осторожны с написанием кода. В этой статье мы рассмотрим некоторые рекомендации по написанию быстрых программ на JavaScript.
Уменьшите количество манипуляций с DOM с помощью хост-объектов и браузера пользователя
Манипуляции с DOM медленные. Чем больше мы это делаем, тем медленнее все будет. Поскольку манипулирование DOM является синхронным, каждое действие выполняется по одному, удерживая остальную часть программы. Поэтому мы должны минимизировать количество манипуляций с DOM.
DOM может быть заблокирован загрузкой CSS и JavaScript. Однако изображения не блокируют рендеринг, поэтому они не задерживают нашу страницу. Тем не менее, нам все равно нужно минимизировать размер изображений.
JavaScript-код, блокирующий рендеринг, можно обнаружить с помощью Google PageSpeed Insights, который сообщает нам, сколько у нас есть сниппетов JavaScript-кода, блокирующего рендеринг.
Любой встроенный CSS блокирует рендеринг всей страницы. Это стили с атрибутами style, которые разбросаны по странице.
Мы должны переместить их все в отдельные таблицы стилей, внутри тега style в разделе body.
CSS следует объединять и минимизировать, чтобы уменьшить количество загружаемых таблиц стилей и их размер. Мы также можем пометить теги link как не блокирующие рендеринг, используя медиа-запросы. Например, мы можем написать следующее:
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
он будет загружается только тогда, когда страница отображается в портретной ориентации.
Нам следует переместить манипуляции со стилями за пределы JavaScript и поместить стили в CSS, определив их в отдельных классах в файле таблицы стилей. Например, мы можем написать следующий код, чтобы добавить класс в файл CSS:
.highlight { background-color: red;
}и тогда мы можем добавить класс с объектом classList следующим образом:
const p = document.querySelector('p');
p.classList.add('highlight');Мы устанавливаем объект DOM элемента p в отдельной константе, чтобы иметь возможность кэшировать его и использовать где угодно, а затем мы вызываем classList.add, чтобы добавить для него класс hightlight.
Мы также можем удалить это, если это больше не нужно. Таким образом, нам не нужно выполнять много лишних операций манипулирования с DOM в коде JavaScript.
Если у нас есть скрипты, от которых не зависит ни один другой скрипт, мы можем загружать их асинхронно, чтобы они не блокировали загрузку других скриптов. Мы просто добавляем async в тег script, чтобы иметь возможность загрузить скрипт асинхронно следующим образом:
<script async src="script.js"></script>
Теперь script.js будет загружаться в фоновом режиме. Мы также можем отложить загрузку скриптов с помощью директивы defer. И это гарантирует, что скрипты будут загружаться в том порядке, в котором они были указаны на странице.
Это лучший выбор, если мы хотим, чтобы скрипты загружались один за другим, не блокируя загрузку других вещей. Сокращение количества скриптов также является обязательной задачей перед запуском кода в производство. Для этого мы используем пакетные модули, такие как Webpack и Parcel, которые создают проект, а затем автоматически собирают его.
Кроме того, инструменты командной строки для таких сред, как Vue и Angular, также автоматически выполняют минимизацию кода.
Минимизируйте количество зависимостей, используемых приложением
Мы должны минимизировать количество скриптов и библиотек, которые используем. Неиспользуемые зависимости также должны быть удалены.
Например, если мы используем методы Lodash для работы с массивами, то мы можем заменить их на нативные методы массива JavaScript, которые также хороши.
Когда мы удалим зависимость, нам нужно удалить ее package.json и запустить npm prune для удаления зависимости из системы.
Плохая обработка событий
Код обработки событий всегда медленный, если он сложный. Мы можем улучшить производительность, уменьшив глубину стека вызовов.
Это означает, что мы вызываем как можно меньше функций. Поместите максимально все в таблицы стилей CSS, если вы манипулируете стилями в обработчиках событий.
И сделайте все, чтобы уменьшить количество вызывающих функций, таких как использование оператора ** вместо вызова Math.pow.
Заключение
Мы должны уменьшить количество зависимостей и загружать их асинхронно, если это возможно. Кроме того, мы должны уменьшить количество CSS в коде и переместить его в отдельные таблицы стилей. Мы также можем добавить медиа-запросы, чтобы таблицы стилей не загружались везде. Наконец, мы должны уменьшить количество функций, которые вызываются в нашем коде.
Автор: John Au-Yeung
Источник: https://levelup.gitconnected.com
Редакция: Команда webformyself.