Встречается на собеседованиях • сегодня

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

Используйте IntersectionObserver для отслеживания видимости элементов вместо частых вызовов getBoundingClientRect. Кэшируйте результаты, если данные не меняются часто. Для анимаций или скролла применяйте requestAnimationFrame с троттлингом.

Пример с кэшированием:

javascript

let cachedRect = null;
function getCachedRect(element) {
  if (!cachedRect) {
    cachedRect = element.getBoundingClientRect();
  }
  return cachedRect;
}
// Сброс кэша при изменениях (ресайз, скролл и т.д.)
window.addEventListener('resize', () => cachedRect = null);

Для скролла:

javascript

let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      const rect = element.getBoundingClientRect();
      // Логика работы с rect
      ticking = false;
    });
    ticking = true;
  }
});

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!

Попробовать бесплатно

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос

пример собеседования

фреймворки на собеседовании

типичные вопросы junior

интервью вопросы и ответы