Артём

Создаешь анимацию
@keyframe animat{
from{
top: 40px;
}
to{
top: 70px;
}
}
И у объекта div {
animation: animat 3s;
animation-direction: reverse;
}

window.innerHeight:
On return, intViewportHeight is the height of the browser window's viewport.
The window.innerHeight property is read only; it has no default value.

HTMLElement.offsetHeight - высота элемента с учетом вертикальных полей и границ в пикселях. Свойство неизменяемое, только для чтения. Возвращаемое значение - целочисленное.

Следовательно могу предположить, что одно ориентируется на окно, а второе на блок(в данном случае на body)

1. автоматическая очистка кэша
2. не сильно, хотя на мобильных устройствах лучше вообще избегать подобных эффектов. С тенью и без разницы мало.
3. максимальные величины лучше указывать в пикселях для разных типов экранов. Скругленные края почти никак не влияют.
4. В момент загрузки.
Используй пиксели для max-width. Остальное в процентах/em/rem/pt. Особых отличий нет.
Главное не перегружать страницу и избавиться от эффектов.