Как уменьшить количество вызовов getBoundingClientRect?

Стратегии оптимизации вызовов getBoundingClientRect()

getBoundingClientRect() – синхронный метод, вызывающий пересчёт макета (layout thrashing), что критично для производительности. Вот системный подход к минимизации его использования.

1. Кэширование результатов

Самый простой способ – сохранить результат вызова в переменной и пересчитывать только при изменении условий (например, на resize или scroll).

class ElementPositionCache {
  constructor(element) {
    this.element = element;
    this.cache = null;
    this.update();
  }

  update() {
    this.cache = this.element.getBoundingClientRect();
  }

  get rect() {
    return this.cache;
  }
}

// Использование
const cache = new ElementPositionCache(myElement);
window.addEventListener('resize', () => cache.update());

2. Паттерн RAF + Batch Processing

Группировка вызовов в рамках одного анимационного кадра с использованием requestAnimationFrame.

let rafId = null;
const elementsToMeasure = new Set();

function scheduleMeasure(element) {
  elementsToMeasure.add(element);
  
  if (rafId) cancelAnimationFrame(rafId);
  
  rafId = requestAnimationFrame(() => {
    const measurements = new Map();
    
    elementsToMeasure.forEach(el => {
      measurements.set(el, el.getBoundingClientRect());
    });
    
    elementsToMeasure.clear();
    rafId = null;
    
    // Обработка всех измерений
    processMeasurements(measurements);
  });
}

3. Использование IntersectionObserver

Для отслеживания видимости элементов или их положения относительно viewport.

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // entry.boundingClientRect уже вычислен!
    console.log('Rect:', entry.boundingClientRect);
    console.log('Is visible:', entry.isIntersecting);
  });
}, {
  threshold: [0, 0.5, 1]
});

observer.observe(document.querySelector('.target'));

4. Применение ResizeObserver

Для отслеживания изменений размеров элементов без ручных вычислений.

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // entry.contentRect содержит размеры
    console.log('New dimensions:', entry.contentRect);
  }
});

resizeObserver.observe(document.querySelector('.resizable'));

5. Дебаунсинг событий scroll и resize

Ограничение частоты обработки событий, которые обычно провоцируют вызовы getBoundingClientRect.

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

window.addEventListener('scroll', debounce(() => {
  // Вызывается максимум раз в 100мс
  const rect = element.getBoundingClientRect();
  // Логика обработки
}, 100));

6. CSS-решения вместо JS

Часто позиционирование можно реализовать чисто на CSS, что исключает необходимость измерений.

/* Вместо JS-расчётов позиции */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

7. Избегание "Layout Thrashing"

Паттерн чтение-запись-чтение – главный враг производительности. Все чтения должны группироваться до всех записей.

// ПЛОХО: чередование чтения и записи
const rect1 = element1.getBoundingClientRect(); // Чтение
element1.style.width = '100px'; // Запись
const rect2 = element2.getBoundingClientRect(); // Чтение → принудительный пересчёт!

// ХОРОШО: группировка операций
const rect1 = element1.getBoundingClientRect(); // Чтение
const rect2 = element2.getBoundingClientRect(); // Чтение
element1.style.width = '100px'; // Запись

8. Архитектурные изменения

Рассмотрите возможность изменения подхода:

• Виртуальные списки (react-window, vue-virtual-scroller) вычисляют позиции видимых элементов
• CSS-переменные для передачи размеров/позиций между элементами
• Собственная система координат на основе трансформаций

Практические рекомендации

1. Профилируйте через Performance DevTools, ища "Forced reflow"
2. Используйте монорепозиторий утилит для работы с геометрией элементов
3. Тестируйте на слабых устройствах – там проблема проявляется острее
4. Рассмотрите альтернативы: offsetWidth/Height, clientWidth/Height иногда достаточно

Оптимизация getBoundingClientRect() – это баланс между точностью, производительностью и сложностью кода. Начинайте с кэширования и наблюдателей, переходя к сложным оптимизациям только при доказанных проблемах в производительности.