Вы столкнулись с одной из наиболее распространенных проблем со сценариями браузера с анимированными веб-страницами.
Причина, по которой ваше приложение замедляется, заключается в том, что браузер представляет собой однопоточную среду.Как только вы забудете, что у вас возникнут проблемы.
setInterval заставляет вас верить, что ваши действия будут происходить параллельно, как в многопоточном окружении.Но в действительности происходит то, что setInterval помещает действие в стек пользовательского интерфейса для последующей обработки.Но если в этот стек одновременно попадает слишком много вещей, некоторые действия будут отставать.setInterval будет продолжать выдвигать новые действия, но старые будут все еще там, и весь рендеринг станет вялым беспорядком.
Относительно того, когда это происходит, это зависит от аппаратных / программных возможностей.iPad имеет гораздо меньшую мощность, чем настольный ПК, что вполне очевидно.
Что вы можете сделать, чтобы избежать отставания.
Плавность торговли дляскорость : увеличьте задержку между интервалами, чтобы избежать кумулятивных действий в стеке пользовательского интерфейса.
setTimeout : эта альтернатива очень похожа на setInterval за исключением того, что он не обеспечивает заданный интервал между повторениями, а скорее фокусируется на том, как долго браузер должен ждать до повторения действия.Таким образом, чтобы сделать его более похожим на setInterval, вам может потребоваться отслеживать истекшее время между действиями и вычислять меру изменения, о котором необходимо позаботиться.
Групповая анимация : у вас может быть один интервал для некоторых связанных анимаций (вы управляете для них мини-очередью), и таким образом вы уменьшаете фактические вызовы setInterval и получаете больше власти над управлением условиями гонки.
Обязательно прочитайте эту статью:
Создание приложения для iPad на HTML5 и очень быстрое ( Томас Фукссоздатель script.aculo.us )