
Оптимизация производительности с помощью регулирования в JavaScript
6 января 2023 г.Некоторые события браузера имеют очень высокую частоту. Количество таких событий, как перемещение курсора, прокрутка, изменение размера окна браузера, удерживание клавиши и т. д., может достигать 100 раз в секунду. Функции, вызываемые при такой частоте событий, сильно нагружают браузер, что приводит к снижению производительности.
В качестве примера напишем простой обработчик события изменения размера окна:
const handleResize = () => {
const { innerHeigh, innerWidth } = window;
console.log({ innerHeigh, innerWidth });
}
window.addEventListener('resize', handleResize)
Попробуйте запустить этот код в консоли браузера и изменить размер окна, и вы увидите, что эта функция вызывается десятки раз даже при небольшом изменении размера.
А теперь представьте, что функция handleResize
имеет не только вывод в консоль, но и ряд операций со сложными манипуляциями с DOM: в этом случае реакция браузера на отрисовку резко замедлится. Как можно оптимизировать этот процесс? Чтобы снизить нагрузку на браузер, необходимо использовать дросселирование.
Как использовать регулирование?
Троттлинг позволяет "замедлить" функцию, т.е. функция будет выполняться не более одного раза за указанный период, даже если она вызывается много раз в течение этого периода. Например, если для события прокрутки страницы вы установите время 100 мс, функция будет выполняться каждые 100 мс во время прокрутки.
Схематически это можно отобразить следующим образом:
Многие библиотеки JavaScript, такие как lodash, underscore, rxjs, предлагают метод дросселирования с различными дополнительными функциями. Ниже вы можете прочитать довольно распространенную реализацию метода дросселя:
function throttle(fn, time) {
let timeout = null;
return function () {
if(timeout) return;
const context = this;
const args = arguments;
const later = () => {
fn.call(context, ...args);
timeout = null;
}
timeout = setTimeout(later, time);
}
}
Вернемся к примеру с обработчиком события изменения размера окна и увидим, что обработчик дросселя вызывается гораздо реже (в демонстрационных целях установлено значение 500 мс):
const handleResize = () => {
const { innerHeigh, innerWidth } = window;
console.log({ innerHeigh, innerWidth });
}
const handleResizeThrottled = throttle(handleResize, 500);
window.addEventListener('resize', handleResizeThrottled);
Таким образом, независимо от того, как часто вызывается какое-либо событие, регулирование не позволит нужной функции запускаться слишком часто и снизит нагрузку на браузер.
Заключение
Это все, что я хотел сказать о функции дроссельной заслонки. Надеюсь, моя статья вам понравилась и оказалась полезной.
Оригинал
Recent Post
-
8 шагов к внедрению микроформления в реагирование с Still.js
2 июля 2025 г. -
По -прежнему.
2 июля 2025 г. -
Используйте бесконечность, а не в петлях Python
30 июня 2025 г. -
В автономном первом JavaScript для космических миссий: как процветает JS в средах с низкой связью.
26 июня 2025 г. -
Как подключить экспресс -приложение к Postgres, используя Scilezize
22 июня 2025 г.
Categories
- Python
- blockchain
- web
- hackernoon
- вычисления
- вычислительные компоненты
- цифровой дом
- игры
- аудио
- домашний кинотеатр
- Интернет
- Мобильные вычисления
- сеть
- фотосъемка видео
- портативные устройства
- программного обеспечения
- телефон и связь
- телевидение
- видео
- мир технологий
- умные гиды
- облако
- искусственный интеллект
- се
- Samsung
- умные города
- digitaltrends
- отели
- Startups
- Venture
- Crypto
- Apps
- безопасность
- техника и работа
- cxo
- мобильность
- разработчик
- 5г
- майкрософт
- инновации
- Права и свободы
- Законодательство и право
- Политика и общество
- Космическая промышленность
- Информационные технологии
- Технологии
- Образование
- Научные исследования
- Автомобильная промышленность
- Программная инженерия
- IT и технологии
- Веб-разработка
- Программирование
- Автоматизация
- Карьерный рост
- Программирование и анализ данных
- Трудоустройство
- Политика
- Искусственный интеллект
- ИТ-технологии
- Программное обеспечение
- Экологическая политика
- Образование и рынок труда
- Политика и право
- Microsoft Teams и SharePoint
- Информационная безопасность
- Кибербезопасность
- Налоги
- Образование и карьера
- Интернет и технологии
- Технологии, Государственные услуги
- Политика и технологии
- Разработка программного обеспечения
- Разработка ПО
- Машинное обучение
- Налогообложение, технологии, открытый исходный код
- Финансы и налоги
- Технологии, Интернет, Экология
- Интернет, безопасность
- Технологии и политика
- Операционные системы
- Профессиональная разработка
- Технологии, Безопасность
- Интернет и общество
- Финансовая индустрия
- Налоговый учёт
- Общественное здравоохранение
- Технологическая отрасль
- Юриспруденция
- Технологии и государство
- Здоровье и фитнес
- IT-инфраструктура
- Технологии и ИИ
- Здравоохранение
- IT
- Технологии, Экономика
- Музыка и технологии
- Здоровье и питание
- IT и безопасность
- Бизнес и предпринимательство
- Технологии, Программное обеспечение
- Технологии и инновации
- Технологии, данные, этика
- Технологии и Интернет
- Технологии и SaaS
- Медицина и здравоохранение
- Онлайн-видеосервисы
- Финансы и технологии
- Чтение и саморазвитие
- Экономика и бизнес
- Безопасность данных
- Удаленная работа
- Авиация и технологии
- Технологии, Игры
- Энергетика
- Социальные сети, безопасность, технологии
- Саморазвитие
- Безопасность информации
- Бизнес и карьера
- Технологии и отношения
- Игровая индустрия
- Компьютерная индустрия
- Математика, Искусственный интеллект
- Наука и технологии
- Технологии и безопасность
- Технологии, Удаленная работа, Бизнес
- Видеоигры
- Технологии, Искусственный интеллект, Этика
- Технологии, социальные сети, 6G
- Технологии, Программирование, AI, Разработка ПО
- Программирование, Разработка ПО, Технологии
- Животные
- Технологии, Искусственный интеллект
- Программирование, карьера, технологии, обучение
- Бизнес и технологии
- Технологии, Безопасность данных
- Астрономия и физика
- Продуктивность, личное развитие
- Медиа и Технологии
- Программирование и Искусственный Интеллект
- Социальные сети
- Политика и экономика
- Технологии, Медицина, Искусственный интеллект
- Технологии и управление
- Космос и астрономия
- Общество и политика
- Космические исследования
- Веб-дизайн
- Искусственный интеллект и безопасность данных
- Технологии, Безопасность, Конфиденциальность
- Экологическая проблема
- Технологии, Погода
- Авиация
- Транспортная сфера
- Технологии и бизнес
- Игровая промышленность
- Телевидение и реклама
- Аналитика данных
- Технологии и кибербезопасность
- Маркетинг
- Технологии и гаджеты
- Технологии, Авиация, Инновации
- Финансы и инвестиции
- Технологии и общество
- Рыночный анализ
- Космология
- Данные и бизнес
- IT и программирование
- Технологии и право
- Программирование и разработка
- Медицинские технологии
- Авиационная промышленность
- Технологии и искусственный интеллект
- Генетическая инженерия
- Бизнес и инвестиции
- Компьютерная промышленность
- Психология и социология
- Образование и технологии
- Рынок труда
- Технологии, Стартапы
- Технологии, Приватность, Чтение
- Маркетинг и продажи
- Виртуальная реальность
- Технологии, Смартфоны, Маркетинг
- Технологии, Бизнес, Личностный рост
- Экологические проблемы
- Экономика и технологии
- IT и карьера
- Интернет и безопасность
- Разработка и технологии
- Биотехнологии
- Интернет-магазины, кибербезопасность
- Финансы
- Безопасность и технологии
- Экономика
- Защита данных
- Data Science
- Карьера и работа
- Финансовый успех, мошенничество, маркетинг
- Безопасность
- Экология
- Космическая индустрия
- Программирование, Python, Обучение
- Технологии искусственного интеллекта
- Технологии, Дизайн, iOS
- Программирование, DevOps, Kubernetes
- Социальные сети и пропаганда
- Корпоративная этика
- Управление IT-инфраструктурой
- Здоровье и медицина
- Медицина
- Медицинская промышленность
- Разработка и дизайн
- Искусственный интеллект, Диагностика систем
- Образование и психология
- Технологии, Автомобильная промышленность
- Автомобили и путешествия
- Астрономия и космология
- Программирование и технологии
- IT, работа в офисе, эмоциональный интеллект
- Компьютерная техника
- Здоровье и благополучие
- Управление персоналом
- Политика и управление
- Бизнес и экономика
- Социальные сети, Пропаганда, Информационная безопасность
- Технологии и автоматизация
- Геймдизайн
- Экология и технологии
- CRM-системы, IT-инфраструктура
- Права человека
- Цифровая цензура, свобода слова, технологии
- Технологии, Искусственный интеллект, Работа
- Наука о данных
- Астрономия, Наука
- Интернет и цифровые технологии
- Технологии, управление
- Интернет и связь
- Технологии и конфиденциальность
- Интернет и свобода слова
- Психология и социальные науки
- Книги и литература
- Работа и карьера
- Финансовые технологии
- Психология и саморазвитие
- IT, программирование, сети
- Технологии, Видеоигры
- Экология и энергетика
- Космонавтика
- Медицина и технологии
- Игры и развлечения
- Музыкальная индустрия
- Логистика и складирование
- Бизнес и финансы
- Экология и окружающая среда
- Правозащита
- Социальные сети и дезинформация
- Технологии и рынок труда
- Технологии, Искусственный интеллект, Рынок труда
- Технологии и будущее
- Медицина и здоровье
- Социальные медиа