Sizes & Scroll

• innerHeight, outerHeight: размеры окна браузера
• inline: CSS sizes - удобно, но не надежно
• getComputedStyle: вычисленные свойства CSS элемента - надежно, но не удобно
• getBoundingClientRect: вычисленные расстояния до viewport(левой и верхней границ), а также суммарная ширина и высота элемента без margin - относителье расстояния не всегда нужны.
• размеры и расстояния для элемента:
  • offset: габариты элемента -margin +scroll, расстояние до body (top, left)
  • client: габариты элемента -margin и -scroll
  • transform: размеры при воздействии CSS transform
  • Абсолютный размер - расстояние от элемента границы документа.
    Такого свойства нет.
    Но его можно получить зная размер документа и положение scroll
  • window scrolling
  • element scrolling
• scroll, resize: события, влияющие на размеры и расстояния
• решение проблемы частоты возникновения событий scroll и resize:
• throttling
• debouncing
• requestAnimationFrame