Почему страницы сайтов «прыгают» вверх или остаются на месте при обновлении?

Приветствую

Раньше не замечал, а если и замечал, то не придавал этому значение. Есть два типа страниц — "ровностоящие" и "прыгающие" (уж так я их назвал). Если страницу прокрутить к низу и обновить ее по кнопке F5, тогда "прыгающие" страницы во время обновления прокручиваются к верху и затем опускаются к исходному положению на момент ее обновления (заметно визуально и по скроллбару браузера), а "ровностоящие", как и сколько их не обновляй остаются на том же самом месте при обновлении.

Пример в GIF (на первой вкладке "ровностоящий" сайт, а на второй "прыгающий"):
5a709c9f8c179661684365.gif

Проверил около ста разных сайтов из закладок в браузерах Chrome и Opera. Примерно 10–15% по субъективным воспоминаниям (не считал) остаются на месте при обновлении страницы, остальные же нещадно прыгают. Не проследил никакой закономерности, и тут и там есть и простые сайты и с кучей скриптов, почти одинаковыми шаблонами и прочими совпадениями. Яркий пример "ровностоящей" страницы — https://github.com/blog/2496-commit-together-with-... Раз 100 обновлял, не прыгает, стоит как вкопанная.

Поведайте пожалуйста причины подобного поведения способы его достижения (чтобы страница не дергалась).
  • Вопрос задан
  • 11414 просмотров
Пригласить эксперта
Ответы на вопрос 1
AlexanderYudakov
@AlexanderYudakov
C#, 1С, Android, TypeScript
Вот так будет прыгать:
<p><img src=picture.jpg></p>
<p>Текст, текст, текст, текст, текст</p>


А вот так не будет:
<p><img src=picture2.jpg width=300 height=200></p>
<p>Текст, текст, текст, текст, текст</p>


Причина проста. Браузер всегда покажет абзац с текстом, не дожидаясь, пока загрузится картинка. Чтобы пользователь смог скоротать время за чтением текста.

Но тут у браузера возникает вопрос:
— А сколько свободного места оставлять под картинку?

Если мы размеры сразу укажем в html (300*200), браузер воспользуется нашей подсказкой и оставит 200 пикселей по высоте пустого места, чтобы потом там отобразить загруженную картинку.

Но если мы не укажем размеры картинки в html, у браузера этой информации не будет. Размер необходимого свободного места под картинку будет взят наобум. Следующий за картинкой текст будет нарисован на экране сразу после этого "наобум".

Уже потом, когда пользователь успеет прочитать половину текста, а браузер — загрузить картинку, размер нужного для картинки места будет пересчитан. При этом текст придется сдвинуть вниз.

Это и есть "прыжки" контента при загрузке страницы.

P.S. То же самое касается любого динамического контента, который подгружается скриптами после загрузки страницы. Размеры контейнеров под динамический контент нужно указывать сразу.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
16 авг. 2022, в 23:20
500 руб./за проект
16 авг. 2022, в 22:28
60000 руб./за проект