Действительно вялое поведение прокрутки на сайте ...

Question

Я сейчас работаю над этим сайтом… http://bit.ly/yR6xzta

При прокрутке сайта или навигации с помощью клавиш со стрелками вверх и вниз вы заметите очень медленное и медленное поведение прокрутки.

Есть идеи, что может вызвать это? Я использую HTML5 и простые теги img шириной 85% и высотой 85%. Javascript не является причиной. Если я полностью избавлюсь от JS, он все равно будет вялым.

Есть идеи, что вызывает это? Я бы хотел повысить производительность этого сайта при прокрутке.

Спасибо за вашу помощь.

Answer 1

Здесь довольно много изображений, один из способов сделать этот процесс более плавным - асинхронное добавление и удаление изображений.Это позволит памяти на странице оставаться на низком уровне и меньше вычислительной мощности для загрузки / отображения изображений.Логика проста: Когда вы на одном слайде загружаете + 5 / -5 изображений слайдов (некоторые слайды содержат более одного изображения, поэтому мы будем основывать его на слайде). Используйте события клавиш со стрелками и добавьте событие прокрутки, чтобы вызвать асинхронный метод, чтобы определить, какие слайды загрузить и какие слайды избавиться от любого тега.

Вы можете протестировать концепцию памяти с помощьюпросто заменив все изображения текстом.Ваш опыт должен значительно улучшиться.

Примечание. Вам придется использовать CSS, чтобы поддерживать постоянную высоту контейнеров с изображениями, чтобы высота прокрутки не изменялась и не смещала панель просмотра.

Answer 2

Клавиши прокрутки и стрелки гладкие, как масло на моем игровом оборудовании, и в принципе не могут использоваться на моем Chromebook.Короче говоря, у вас есть изображения на одной странице размером 51 миллион пикселей (вероятно, 10 МБ или около того?).Производительность при перемещении будет сильно зависеть от того, как браузер справится с этим (с аппаратным ускорением или нет) и от самого оборудования.Это будет особенно актуально на ноутбуках, где управление питанием встроено в ОС.Например, JS не может инициировать переключение на выделенную графику, что означает, что перемещение всех этих пикселей передается процессору (на самом деле это не то, что он должен делать).

Возможные варианты:

• Загружайте изображения только по мере того, как пользователь прокручивает к ним (затемняйте их, когда они закончат загрузку, чтобы они выглядели хорошо)
• После загрузки изображений удаляйте / скрывайте их, пока пользователь не прокрутит их, чтобыклиент не должен отображать все изображения все время (opacity: 0; не будет работать, но может display: none; или visibility: hidden;. Вы также можете сразу удалить узлы, они сразу же загрузятся, если вы добавите их обратно, потому чтоони будут кэшированы.)
• Разделить каждый раздел на свою страницу.Я знаю, что это не так элегантно, но это может быть необходимо.Не у каждого есть $ 400 графических процессоров ...

Answer 3

попытайтесь уменьшить изображения, и я думаю, что это связано с JS.