Cleave.js выполняет форматирование ввода в режиме реального времени, перехватывая события клавиатуры и изменяя отображаемое значение поля без изменения логики хранения данных. Основная нагрузка возникает не в вычислительной части как таковой, а в связке «событие ввода → преобразование строки → обновление DOM → перерасчёт layout».
Ключевой момент: даже лёгкие операции форматирования становятся значимыми при массовом количестве инстансов или высокой частоте ввода.
Факторы, влияющие на производительность:
Каждое изменение значения в поле запускает цепочку:
Особенно затратным становится шаг восстановления позиции курсора. Cleave.js анализирует различие между старым и новым значением и вычисляет смещение, что при сложных масках может включать несколько проходов по строке.
Основной инструмент анализа — Chrome DevTools Performance panel.
Типичная проблема: рост времени scripting при увеличении количества символов в маске, особенно при форматах с динамическими блоками.
При профилировании выделяются несколько узких мест.
Операции разбиения строки и вставки разделителей имеют линейную сложность O(n). При этом повторное форматирование происходит на каждый ввод символа.
Оптимизационно важный момент:
Смещение курсора требует анализа:
При сложных масках (например, +7 (###) ###-##-##)
количество вычислений растёт из-за необходимости учитывать статические
символы.
Каждое обновление value вызывает:
Особенно дорого стоит комбинация:
set value → set selectionRange → next input event
Бенчмарки позволяют отделить накладные расходы форматирования от общей стоимости UI.
Используется измерение через performance.now():
const start = performance.now();
for (let i = 0; i < 10000; i++) {
cleave.setRawValue("79991234567");
}
const end = performance.now();
console.log(end - start);Такой тест показывает только синтетическую скорость, но не учитывает DOM-стоимость.
Более реалистичный вариант:
const input = document.createElement("input");
document.body.appendChild(input);
const cleave = new Cleave(input, {
phone: true,
phoneRegionCode: "RU"
});
const start = performance.now();
for (let i = 0; i < 5000; i++) {
input.value = "79991234567";
input.dispatchEvent(new Event("input"));
}
const end = performance.now();
console.log(end - start);Этот вариант включает:
В этом диапазоне Cleave.js практически не заметен в профиле CPU.
Основные затраты:
Появляются первые эффекты деградации:
Причина — одновременное выполнение форматирования в нескольких инстансах.
Типичные проблемы:
Особенно критично в таблицах с инпутами (grid-like UI), где каждый ряд содержит собственный Cleave.js.
Для анализа эффективности полезно изолировать алгоритм форматирования.
Пример теста без DOM:
function formatPhone(value) {
return value
.replace(/\D/g, "")
.replace(/(\d{3})(\d{3})(\d{2})(\d{2})/, "+7 ($1) $2-$3-$4");
}
const start = performance.now();
for (let i = 0; i < 100000; i++) {
formatPhone("79991234567");
}
console.log(performance.now() - start);Сравнение с Cleave.js показывает:
При использовании Cleave.js внутри React возникают дополнительные накладные расходы:
Типичная проблема:
Возникает эффект «двойной работы».
Оптимизационный паттерн:
Cleave.js может создавать скрытую нагрузку на GC при частом создании/удалении инстансов.
Причины:
При массовом создании инстансов (например, таблицы с пагинацией) наблюдается:
Chrome DevTools Memory panel позволяет выявить:
Практический сценарий:
Если Cleave.js корректно очищается, рост объектов минимален. При неправильной интеграции остаются ссылки на input элементы.
При высокой нагрузке Cleave.js может влиять на responsiveness интерфейса.
Метрики:
Основной источник long tasks — синхронное форматирование строки + обновление selection.
Для корректных бенчмарков важно учитывать:
Метрики Cleave.js:
Профилирование показывает, что основная экономия достигается не оптимизацией formatter, а снижением количества активных инстансов.
Подход:
Это уменьшает: