JS тормоза

Я, честно, хз, но может сделать
var ball = document.getElementById("ball")
один раз в глобальной видимости (и юзать ниже её), чем каждый раз вызывать метод (тем более два раза).

спасибо, но увы, не помогло. Да и этот тут на 99% не при чем

Это из-за постоянного обновления экрана. Интервал в 3 мс - слишком маленький, таймеры в Windows имеют точность (resolution) 15 мс, то есть когда ты задаёшь таймер на 3 мс то реальная задержка получается либо 0, либо 15. Лучше сделать таймер где-то на 10-20 мс и добавить скорости шарику (он что-то очень медленно летает в любом случае).

Самое узкое место во всех браузерах - обновление изображения на экране, а у тебя это происходит каждые 0/15 мс - посчитай FPS, требуется много ресурсов.

Вывод профайлера в FF это подтверждает:

Как видишь - checkPos() вызывалось столько же раз, сколько и bmove(), но т.к. там одни вычисления, то выполняется она очень быстро - даже при том, что кода в ней больше, чем в bmove().

На медленных машинах у тебя накапливаются вызовы setInterval() (т.к. bmove() не ждёт, пока отработает предыдущая) и в какой-то момент всё виснет. По этой причине я обычно использую setTimeout() и замеряю время, прошедшее с последнего события таймера, а отсюда уже строю прочие вычисления. И движение получается плавнее.

вау! Спасибо огромное! А где в фоксе такая фича?

(с эстонским акцентом) этто пошаховая стратеххия
=)

"Про Firebug не слышал? Первейшаая вещь для вебдева. "
знаю, пользуюсь, вчера специально искал в нем измерялку - не нашел :(

еще раз спасибо!
*посыпаю голову пеплом*

п.с.: Кстати совет по скорости помог

Меня заинтересовал момент с таймерами. В моём проекте много анимации средствами js и порой начинает подтормаживать. После ряда оптимизаций с уменьшением размера картинок в момент анимации, работать стало существенно лучше. Но вот о том что дискретность таймеров может влиять на качество анимации догадывался, но серьёзно не задумывался. У меня не Windows, практически везде под проект используется Ubuntu. Потому хотелось бы услышать комментарий на этот счёт или хотя бы рекомендаций чего почитать по теме

Честно говоря, не знаю, как в других ОС, но по-моему не стоит всерьёз расчитывать на то, что браузер сможет адекватно обновлять картинку и по ходу ещё выполнять скрипты каждые, например, 5 мс. А если анимации больше, чем одна, то такой интервал вполне может растянуться до 15-20 мс - особенно в FF и особенно в старых его версиях (1-2).
Хром в этом смысле намного лучше, ну, он под JS и заточен.

Поэтому я советую (1) использовать setTimeout вместо setInterval (и вызывать setTimeout после отработки функции таймера) и (2) строить расчёты не на задержке таймера, а на реально прошедшем времени, либо на оставшемся до завершении операции отрезке.
(2) поможет получить плавную анимацию даже на медленной машине/при тормозах браузера.

Рекомендовать к прочтению кроме гугла, увы, ничего не могу :)

Ещё прицепляю скрипт, который я использую для плавнго изменения характеристик любого (одного или нескольких) HTML-элемента. Он демонстрирует как раз оба пункта, которые я упомянул выше.
Названия функций там не очень удачные, начиналось всё со слайдера, а получилось немного большее.

SlideAs() просто обёртка для более удобного вызова Slide(). Использовать так:


При вызовах можно задать больше опций, чем в примерах, см. SetupSlideOptions() - там они все устанавливаются.
Функции вроде $each(), $hide(), $style() говорят сами за себя и тривиальны, поэтому сюда не приложил.

Ух ты.
Я тоже когда-то пытался арканойдить:
http://mrlinker.narod.ru/arc/

Где-то еще была версия с вылетающими призами и разнотипными квадратиками, но не могу найти :)

В основном цикле тригонометрия не нужна.
Достаточно один раз, когда меняется угол, расчитать единичный вектор.
У меня там массив field позволяет нарисовать уровень.

Proger_XP, я пока пользуюсь jQuery().animate(), но назревает тот благородный момент, когда нужно что-то менять. И да, предварительно поразмыслив я сразу отказался от setInterval(), так как его сложно контролировать (требуются блокираторы навроде семафоров). setTumeout() куда проще в обращении. Я обернул всё в свой pushTimeout(func, time, group) и теперь группирую анимации.

В общем мне не хватало этих количественных размышлений об интервалах обновления. Спасибо.

2Romik

Семафоры в JS... об этом надо написать статью :D

jQuery умеет уйму всего и всё уже отточено, но я предпочитаю писать всё сам, так интереснее.
Рад что смог помочь :)

как спасибу выкладываю что получилось на текущий момент:
http://yaweb.ru/test/2/index.html
старт/пауза - клик по полю.
Если работой не завалят - буду делать дальше блоки (разных ствойств) и бонусы. Как и что делать представляю, всё дело в "сесть и сделать" :)

п.с.: вопросом "на кой я это делаю?" задаюсь постоянно, но ответа пока не нашел. Если у кого будут какие-то мысли - пишите, хоть в ЛС.
п.п.с.: есть еще мечта переписать Тетрис...

Вот эта версия мне же больше нравится, хорошая скорость и даже фон есть, а тормозов нет. Теперь даёшь блоки :)
Кстати, есть и глюк - после game over'а кликаешь ещё раз, появляется картика "Паука", клик - снова игровое окно, alert(game over), клик - "Пауза" и т.д. бесконечно.

Для удовольствия и самообчения, зачем же ещё :)

обновил, ссылка выше.
призы (действующие), очки, жизни.
Раньше не мог достучаться до форума, лежал что ли?...

н-да... делаю в Опере (там всё замечательно), теперь вижу косяки ИЕ и ФФ
по поводу анимации надо подумать, но получатся пересекающиеся таймеры, что не есть правильно.

хм, мысля интересная, подумаю в этом направлении, хотя кажется что ничего не выйдет.