Тормозит gif анимация в браузерах
Полезная информация
№1 24-09-2011 14:25:48
Проблема с gif, тормозит браузер ЦП 100%
№2 24-09-2011 14:28:57
Фунт
Если часто открываете сайты с большим количеством gif-ок, то лучше поставить Nightly-версию браузера. Там эта проблема частично решена. В Mozilla сейчас активно ею занимаются.
Большой кот. Пуфыстый. Полосатый. Зубастый (:
№3 24-09-2011 14:35:22
спасибо, я тогда подожду пока обновление выйдет от разработчиков с исправлением данной проблемы. Можно еше вопрос, как поставить так что бы новые окна открывались во вкладках? а не новое окно. и еше, когда я ставлю в настройках браузера блокировать всплываюшие окна то он все равно их не блокирует(((
№4 24-09-2011 14:39:08
как поставить так что бы новые окна открывались во вкладках? а не новое окно.
Инструменты - Настройки - Вкладки. Ставим самую верхнюю галку.
"Большинство философов до сих пор придерживается весьма нефилософских воззрений на многие вопросы философии" Эдгар Аллан По
№5 24-09-2011 14:40:07
Фунт
Ждать придётся довольно долго, предупреждаю сразу (:
Большой кот. Пуфыстый. Полосатый. Зубастый (:
№6 24-09-2011 14:42:06
Фунт пишет: как поставить так что бы новые окна открывались во вкладках? а не новое окно.Инструменты - Настройки - Вкладки. Ставим самую верхнюю галку.
там стоит галочка((
№7 24-09-2011 14:46:38
Поставьте TU или TMP и настройте принудительный однооконный режим.
Так же поставьте и настройте ABP и его popup-addon
Большой кот. Пуфыстый. Полосатый. Зубастый (:
№8 24-09-2011 14:54:26
Спасибо большое, очень полезный плагин
Board footer
Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia
Язык отображения форума: [Русский] [English]
Замечали, когда только открываете веб-сайт, первые секунды всё тормозит? Скрол как-то не ровно работает, параллаксы скачут, а из анимации словно вырезали львиную долю кадров. Но очень скоро всё нормализуется. Не замечали такого? Взгляните на демо-страницу плагина, и сразу поймёте, о чем я.
Проблема в том, что динамика не может нормально работать, пока страница лагает. В качестве решения предлагаю плагин «Afterlag.js». Плагин позволяет отслеживать событие окончания лагов. Лаги прошли, включайте анимацию, тормозить не будет. А пока страница лагает, нечего и динамику запускать, только вид портить.
Как использовать
Подключаете JS файл с плагином, пишете:
Как только на странице кончатся лаги, ваша консоль начнёт выражать радость по этому поводу. Если jQuery использовать не хотите, подключите нативный плагин и напишите:
Результат будет тот же.
Это самое простое, что может сделать плагин. На самом деле у плагина есть API и куча других способов вызова, всё это в полном объеме описано в ридми репозитория на гитхабе. Там же и способы подключения, ссылки на CDN, название плагина в bower и модуля npm.
Почему всё тормозит
Давайте разберёмся, почему анимация лагает на старте. Рассмотрим анимацию кругляшка на демо-странице, его задача плавно подниматься вверх, затем опускаться вниз.
Анимация движения реализована с помощью метода animate библиотеки джэйквери. Анимируем мы единственный CSS атрибут top, его значение определяется заданной функцией от времени. Запустив анимацию, джэйквери старается каждое мгновение обновлять значение top. Если бы у джэйквери действительно получалось обновлять это значение так часто, то анимация была бы шикарно гладкой. Но у jQuery не получается.
Не получается, потому что JS исполняет все события в одном потоке. JS бежит по списку того, что нужно сделать, и делает это. Не все дела встают в конец списка. Если вы кликнули куда-то, тем самым вызвав какое-то событие, задачу по его исполнению воткнут в начало списка, чтобы выполнить его как можно скорее. Скорее, но не в тот же момент. Если суть не ухватываете, можете прочитать эту короткую статью, она более подробно рассказывает о том, как работают интервалы и таймауты в свете однопоточности JS. И не забывайте, что на самом деле все задачи исполняет браузер, и список дел, переданный от JS, еще разбавляется прочими задачами браузера.
Так вот, джэйквери хотела почаще обновлять значение top для нашего кругляшка. Но в момент загрузки страницы было очень много более приоритетных дел: страничку отрендерить, видео с ютуба подтянуть и так далее. Бедняга браузер был так занят, что успевал обновлять значение top только раз в 200–300 миллисекунд. За это время кругляшок исходя из заданной функции смещался уже пикселей на 60. В итоге круг не плавно подходит к своему новому положению, а телепортируется туда, создавая ощущение потерянных кадров, дёрганости и тормознутости. Потом, когда браузер доделал все свои важные дела, он начал своевременно обновлять значение top для круга, и анимация стала ровной.
Как работает «Afterlag.js»
Афтерлагу предстоит узнать, когда браузер перестанет быть таким занятым и сможет достаточно часто выполнять код, необходимый для гладкого воспроизведения анимации. Скажем, нас устроит, если задача анимации будет исполняться хотя бы раз в 50 миллисекунд ( frequency ). При инициализации афтерлаг запомнит текущее время и запустит интервал в 50 мс. Спустя 50 мс опять узнаем текущее время. Сравниваем текущее время с прежде зафиксированным, если действительно прошло 50 мс, значит лаги кончились. А если на самом деле прошло не 50 мс, а, скажем, 100 мс, значит на странице всё еще лаги и процедуру надо повторять до тех пор, пока интервал не начнёт работать так, как мы этого ожидаем.
Только я написал плагин по указанной выше схеме и решил, что он достаточно работоспособный. Но нет. Случается такое, что интервалу просто повезло. Бывало так, что первые две итерации ожидаемое значение прошедшего времени разнилось с реально прошедшим, на третью итерацию совпадало, а на четвертую опять разнилось. Решаем задачу в лоб: пускай ожидаемое время совпадёт с реально прошедшим 10 раз подряд ( iterations ).
«Ну вот, теперь всё наверняка работает как надо» —подумал я, и ошибся. Если установить не достаточно большие значения для ( frequency ) и ( iterations ), например 30 и 3, в первые моменты может случится такое, что браузер еще не был занят первые 90 мс, то есть 3 итерации по 30 мс, афтерлаг решал, что лаги кончились, а они на самом деле только начинались. Решаем опять в лоб: установим значение времени в течение которого нельзя доверять афтерлагу ( delay ) с запасом — 200 мс.
Обновление статьи (12 марта 2015):
По совету webmasterx была добавлена настройка ( need_lags ). Цитирую документацию: «При значении false афтерлаг сработает либо, если лаги закончатся, либо, если они даже не начнутся. Значение true разрешает афтерлагу сработать только после окончания лагов, то есть если лагов не было, афтелаг не сработает. Устанавливая значение true не забудьте также установить значение для timeout , в противно случае, если лагов не будет, афтерлаг так и не сработает.»
Конец обновления.
Теперь всё работает как надо. Есть еще один параметр, который я учел сразу, но решил сказать только сейчас. Это допустимая погрешность при сверке ожидаемого и реально прошедшего времени ( scatter ) — 5 мс. Не будем с браузером очень уж строгими.
Все числа указанные в этом разделе используются афтерлагом по умолчанию, но могут быть изменены разработчиком при инициализации.
Заключение
Анимация, реализованная при помощи CSS, гораздо меньше подвержена подобного рода лагам. Афтерлаг полезен только тогда, когда динамика сайта связана с JS, в том числе плавные параллаксы, анимация передвижения скрола и прочее. Мне было бы интересно узнать ваше мнение о полезности плагина.
Афтерлаг чаще всего срабатывает верно, но не даёт 100% гарантии. При изменении настроек приходится ловить баланс: большая надёжность и более долгое ожидание или меньшая надёжность и более короткое ожидание. Плагин придётся по душе тем разработчикам, которые любят, когда динамика работает красиво и так, как она была задумана.
т.е. при наведении курсора начинает крутится gif, но медленно и с рывками
в чем причина такого нерадивого поведения?
ЗЫ: сами мы не местные, с html-ом впервые работаем
а на чем ты проверяешь //я попробовала //у меня нормальная скорость и рывков нетвобщем дело такое - в ACDSee скорость показа gif-файла раза в 3 быстрее (как и задумывалось), а на страничке медленно . рывки - это я так выразился неудачно - заметно смену кадров, что нежелательно.
Добавлено 13.05.05, 08:50
может с гифником непорядок. сделал на Ulead Gif Animator 2.0
ну вообщето gif работает прекрасно .
я тут вот постану и посмотри ее на всех браузерах //она работает бытро . 4 работают правильно
погляди нормально по моему работает .
а на страничке медленно . рывки - это я так выразился неудачно - заметно смену кадров, что нежелательно.ммм. я все тоже наблюдаю и у себя, вот только хотелось чтобы быстрее он проигрывался.. сл-но надо либо уменьшать время между сменой кадров, либо уменьшать колличество кадров в гифе, а ведь експлорер играет его медленней чем нужно - с задержкой между кадрами 0.1с, а надо 0.04с вот
кстати не пробовала запустить его ACDSee или каким нибудь просмотрщиком, не эксплорером? проигрываться будет быстрее
тоже самое и у твоей подписи огненной - запусти в просмотрщике картинок - гораздо лучше смотрится чем в браузере (у нее задержка между кадрами 0.05с)
Добавлено 14.05.05, 09:48
попробовал уже на разных, причина не в этом
(да и шустрый он)
бред .
у тебя явно что-то с натройками браузера .
я вижу и ту и другую картинку совершенно нормально .
то что ты описываешь я виделу у себя когда использовала netscap у него идет резкое замедление картинок поэтому я их движение вообще вырубила .
моя подпись работает очень быстро . если ты видишь ее по кадрам то тебе надо лечить браузер . срочно
Добавлено 14.05.05, 13:26
ты еще скажи что катенок медленно перемещаеться
Читайте также: