Тест плавности прокрутки — измерьте рывки при скролле

Этот тест плавности прокрутки измеряет тот вид движения, с которым вы сталкиваетесь чаще всего: страница или список движутся под пальцем или колесом мыши. Именно при прокрутке рывки проявляются в первую очередь, потому что она происходит постоянно, а ваш глаз натренирован их замечать. Страница, которая дёргается при движении, лента, которая пропускает кадры при пролистывании, документ, который трясётся строка за строкой, — всё это сводится к одному: способен ли браузер выдавать свежий кадр на каждое обновление экрана, пока контент в движении. Этот тест прокручивает высокую полосу пронумерованных строк с фиксированным шагом за кадр и подсчитывает кадры, приходящие с опозданием.

Поскольку строки содержат чёткие числа и резкие границы, ваш глаз может судить о плавности напрямую, а счётчик выражает её в цифрах. Это позволяет сравнивать браузеры, расширения и компьютеры на основе данных, а не расплывчатого впечатления.

Как пользоваться тестом прокрутки

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

• Следите за движением строк. Плавная прокрутка выглядит как единое непрерывное скольжение; рывки выглядят как строки, которые подпрыгивают или замирают при прохождении.
• Проследите глазами за номером строки, пока она движется вверх. Если она скользит равномерно — тайминг хороший; если дёргается — кадр запоздал.
• Читайте счётчик. Ожидаемое время кадра — это ваш обычный интервал между кадрами, Наибольший разрыв между кадрами — самая длинная зафиксированная задержка, а Рывки подсчитывают каждый запоздавший кадр.
• Попробуйте полноэкранный режим и настройте скорость под то, как вы обычно прокручиваете, — размеренное чтение или быстрое пролистывание.

Используйте Сбросить счётчик, чтобы начать новый подсчёт. Если оставить тест работать на тридцать секунд, картина получится честнее, чем при беглом взгляде, потому что фоновые сбои то появляются, то исчезают.

Почему прокрутка дёргается

Плавная прокрутка требует, чтобы браузер выдавал новый кадр на каждое обновление экрана — каждые 16.7 миллисекунды при 60 Гц, каждые 8.3 при 120 Гц, — одновременно обслуживая саму страницу. Когда что-либо задерживает эту работу, кадр пропускается и прокрутка дёргается. Обычные виновники вполне конкретны и устранимы.

Тяжёлые страницы и скрипты

Крупные изображения, сложная вёрстка и загруженные скрипты делают отрисовку каждого прокручиваемого кадра дорогой. Страницы, которые выполняют код на каждое событие прокрутки, особенно склонны к рывкам. Это свойство самой страницы в той же мере, что и вашего компьютера, — именно поэтому на одной и той же машине одни сайты прокручиваются плавно, а другие нет.

Расширения браузера

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

Композитинг и аппаратное ускорение

Браузеры стараются передать прокрутку графическому процессору, чтобы она оставалась плавной даже при загруженной странице. Когда аппаратное ускорение выключено или страница возвращает работу в основной поток, прокрутка переходит на более медленный путь и начинает дёргаться. Включение аппаратного ускорения в настройках браузера обычно помогает.

Энергосбережение и фоновая нагрузка

Как и с любым движением, ноутбук в режиме экономии заряда, перегретое устройство, снижающее частоту, или фоновая задача, отбирающая процессорное время, — всё это приводит к запоздавшим кадрам. Тест прокрутки отражает то же состояние системы, которое управляет любым другим видом движения.

Как выглядит хороший результат

Здоровая прокрутка — это высокая, стабильная частота кадров с числом рывков около нуля и наибольшим разрывом между кадрами, близким к ожидаемому времени кадра. В таблице ниже показано целевое время кадра для распространённых частот обновления — значение, вокруг которого тест должен держаться во время прокрутки.

Более высокая частота обновления делает прокрутку заметно плавнее, но лишь при условии, что браузер способен и дальше укладываться в этот более жёсткий бюджет. Уточните частоту обновления, на которой вы реально работаете, с помощью нашего руководства по частоте обновления, а чистую частоту кадров измерьте на основном тесте FPS.

Как сделать прокрутку плавнее

• Включите аппаратное ускорение в настройках браузера, чтобы прокрутка выполнялась на графическом процессоре.
• Отключайте тяжёлые расширения по одному или тестируйте в приватном окне, чтобы найти виновника.
• Закройте фоновую нагрузку и держите устройство прохладным и подключённым к сети.
• Повысьте частоту обновления, если ваш дисплей это поддерживает, а затем повторите тест, чтобы убедиться, что браузер справляется.
• Обновите браузер и графические драйверы — они часто приносят улучшения композитора и прокрутки.

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

Часто задаваемые вопросы

Здесь прокрутка плавная, но на некоторых сайтах дёргается. Почему?

Потому что плавность зависит и от страницы, и от вашего компьютера. Тяжёлые скрипты, крупные изображения и обработчики событий прокрутки делают некоторые сайты дорогими для скролла. Чистый результат здесь означает, что ваш браузер и железо справляются; узкое место — загруженный сайт.

Делает ли более высокая частота обновления прокрутку плавнее?

Да, при условии, что браузер способен выдавать кадр на каждое обновление. Экран 120 Гц скользит плавнее, чем 60 Гц, но лишь пока страница успевает укладываться в более короткий бюджет кадра. Если не успевает — вы просто заметите рывки раньше.

Почему одна и та же страница прокручивается по-разному в двух браузерах?

Браузеры различаются в том, как они выполняют композитинг и передают прокрутку графическому процессору, и в том, как расширения встраиваются в страницу. Нередко один браузер прокручивает страницу плавно, тогда как другой дёргается на том же самом железе.

Это то же самое, что тест заиканий?

Они используют общий счётчик времени кадра, но этот тест прогоняет реальный прокручиваемый контент через композитор браузера — а это и есть повседневный случай, который волнует большинство людей. Тест заиканий изолирует чистый тайминг кадров без слоя прокрутки.

Что этот тест проверяет — мой монитор или мой браузер?

В основном ваш браузер и машину, на которой он работает. Строки движутся через путь отрисовки и композитинга браузера, поэтому плохой результат обычно указывает на браузер, расширение или системную нагрузку, а не на саму панель. Ваш дисплей всё же задаёт потолок — экран 60 Гц никогда не сможет прокручивать так же плавно, как 120 Гц, — но при условии, что частота обновления достаточна, этот тест оценивает, насколько хорошо программное обеспечение поспевает за движением.

Настройки плавной прокрутки и прокрутка на высокой частоте

Большинство браузеров и операционных систем предлагают опцию плавной прокрутки, которая анимирует каждый шаг скролла вместо скачков. Она делает движение мягче на вид, но не создаёт кадры, которые браузер не в состоянии нарисовать: если страница тяжёлая, плавная прокрутка просто анимирует те же рывки. Реальный выигрыш даёт высокая частота обновления в паре со страницей, достаточно лёгкой, чтобы поспевать. На экране 120 Гц прокрутка простой страницы заметно плавнее, чем на 60 Гц, потому что то же движение описывается вдвое большим числом кадров. Этот тест позволяет убедиться, что ваш браузер действительно выдаёт эти кадры, а не отбрасывает половину из них.

Прокрутка на мобильных, тачпаде и колесе мыши

То, как вы прокручиваете, меняет ваши ощущения. Колесо мыши движется дискретными шагами, поэтому плавность зависит от того, насколько хорошо браузер анимирует переходы между ними. Тачпад или сенсорный экран прокручивают непрерывно и передаются композитору, что обычно является самым плавным путём, — но и самым наглядным, когда кадр отбрасывается, потому что ваш палец задаёт ожидание, которому экран должен соответствовать. Телефоны и планшеты особенно чувствительны здесь, поскольку прокрутка — основной способ перемещаться по всему. Если страница дёргается под пальцем, но не под колесом мыши, значит композитор вынужден ждать основной поток.

От чего зависит прокрутка без рывков

Плавная прокрутка — это цепь, и результат определяет её слабейшее звено: страница должна быть достаточно лёгкой, чтобы успеть отрисоваться, браузер должен передать прокрутку графическому процессору, система не должна быть загружена или снижать частоту, а дисплей должен иметь запас частоты обновления, чтобы показать кадры. Этот тест нагружает всю цепь разом. Когда число хорошее — держатся все звенья; когда плохое — разделы выше помогают сузить круг и понять, какое звено проверить первым. Поскольку прокрутка встречается так часто, небольшие улучшения окупаются везде: обновление браузера, отключённое расширение или переход на аппаратное ускорение способны превратить дёрганый результат в чистый — и вы почувствуете разницу на каждом сайте, который посетите после этого.

Связанные тесты дисплея и движения

Прокрутка — лишь один повседневный срез производительности движения. Продолжите с этими вспомогательными инструментами:

• Тест частоты кадров (тест FPS) — измерьте живую частоту кадров и частоту обновления.
• Тест размытия в движении — посмотрите, насколько сильно ваш экран смазывает движущиеся детали.
• Тест пропуска кадров — проверьте, отрисовывает ли панель каждый кадр.
• Тест разрыва экрана — проверьте, выровнены ли кадры по обновлению экрана.
• Тест заиканий — измерьте стабильность времени кадра на программном уровне.