#javascript #reactjs #scroll
#javascript #reactjs #прокрутка
Вопрос:
У вас, ребята, есть какое-нибудь быстрое решение для этого?
Я прокручиваю вверх и вниз очень быстро, и вы можете видеть, что некоторые части становятся белыми. Пожалуйста, обратитесь к моей короткой записи ниже:https://screencast-o-matic.com/watch/cYjuXRmdje
Я использую браузер Chrome и провел некоторое исследование, и, похоже, это из-за новой проблемы в Chrome. Аппаратное ускорение, его можно найти в настройках Chrome> Дополнительно> Система> «Использовать аппаратное ускорение, когда оно доступно»
Отключение работает, но как насчет Edge или чего-то подобного.
Живой сайт:https://hitchcliff.github.io/onepage-studio / Репозиторий Github: https://github.com/hitchcliff/onepage-studio-code
Комментарии:
1. Используете ли вы какие-либо обработчики событий onScroll? Я предполагаю, что у вас есть какой-то трудоемкий JS, который запускается при прокрутке, что мешает браузеру эффективно обновляться (редактировать: при беглом взгляде на репозиторий я многого не увидел)
2. Возможно, добавление небольшого фрагмента вашего кода помогло бы нам.
Ответ №1:
Моим первым подозрением было, что будет запущен какой-то JS, который предотвратит обновление браузера, после использования инструментов разработчика Chrome я не мог видеть ничего очевидного.
Затем я посмотрел на изображения, которые у вас есть на странице, и они ОГРОМНЫ, у вас есть изображения размером более 10 МБ! В идеале (и это зависит от контекста) вы должны получать свои изображения размером менее 100 КБ (и желательно меньше!).
Я бы посоветовал вам запускать все ваши изображения с помощью такого инструмента, как:https://squoosh.app / или https://tinypng.com / — Я подозреваю, что это решит вашу проблему. Браузеру потребуется много усилий для обработки файлов такого размера, поэтому вы видите белые области.
В долгосрочной перспективе рассмотрите возможность внедрения инструмента минимизации как части вашего процесса сборки, чтобы помочь автоматизировать подобные вещи.
Комментарии:
1. На самом деле, нет трудоемкого JS-кода, поскольку это всего лишь базовый одностраничный макет, и, насколько я помню. Я провел некоторое тестирование каждого раздела и компонента, чтобы увидеть, возникнет ли проблема. Но этого не произошло, когда на странице всего несколько разделов. Поэтому я просто отбрасываю подозрения в размерах изображений. Мне нужно будет проверить эти предложения, спасибо!
2. Вы правы, это было из-за размеров изображения!!! Однако моя догадка была правильной, что это было из-за «Аппаратного ускорения в Chrome». Теперь он работает плавно в Edge. Я также замечаю что-то странное, он показывает белый экран, хотя я все еще нахожусь в разработке (локально).