Почему чтение offsetTop/offsetHeight в обработчике регулируемой прокрутки по-прежнему вызывает принудительную перекомпон ⇐ Javascript

[Anonymous]

Я профилирую поведение прокрутки в Chrome DevTools.
У меня есть регулируемый обработчик прокрутки. Внутри обработчика я вычисляю
прогресс прокрутки страницы и переключаю некоторые элементы пользовательского интерфейса, такие как
кнопка «Вернуться к началу».
Функция считывает несколько свойств, связанных с макетом, включая ScrollTop,
scrollHeight, offsetTop и offsetHeight.
Пример:

Код: Выделить всё

function percent() {
let scrollTop = document.documentElement.scrollTop || window.pageYOffset;

let totalHeight =
Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.body.clientHeight,
document.documentElement.clientHeight
) - document.documentElement.clientHeight;

const el =
document.getElementById("post-comment") ||
document.getElementById("footer");

if (el.offsetTop + el.offsetHeight / 2 <
window.scrollY + document.documentElement.clientHeight) {
document.querySelector("#nav-totop").classList.add("long");
}
}

При профилировании с помощью панели Chrome DevTools Performance я вижу, что
эта функция связана с задачей макета, а DevTools указывает
принудительную перекомпоновку.
Однако обработчик прокрутки уже ограничен.
Мои вопросы:

• Ожидается ли, что чтение свойств макета, таких как offsetTop,

  Код: Выделить всё

  offsetHeight

  или ScrollHeight все равно могут вызвать принудительную перекомпоновку
  даже если обработчик прокрутки ограничен?
• Считается ли это нормальным для логики пользовательского интерфейса на основе прокрутки, такой как
  индикаторы прогресса прокрутки?
• Существуют ли рекомендуемые шаблоны для реализации этого типа
  логики при минимизации перерасчета макета?ic while минимизировать перерасчет макета?

Подробнее здесь: https://stackoverflow.com/questions/799 ... r-still-tr