Я разрабатываю небольшое приложение для тестирования CSS3 и translate3d. Идея состоит в том, чтобы визуализировать несколько DIV, случайно перемещающихся по экрану. Это своего рода система частиц, я знаю, что мог бы использовать WebGL или Canvas для повышения производительности, но я также хочу, чтобы она работала гладко в мобильных браузерах, поэтому я подумал, что манипуляции с DOM будут лучше для производительности.
Результат вы найдете через пару часов по этому url.
Я хотел бы достичь наилучшей производительности, чтобы увеличить количество DIV.
Но вот моя проблема, у меня есть «проблема с рендерингом», которую я заметил, когда использовал TimeLine в Chrome или Safari. Время от времени вся страница отображается с небольшой задержкой, заметной в Safari iPhone или Chrome Android+iPhone.
Так что, если кто-то из вас готов принять вызов, не стесняйтесь, я пробовал много вещей, но так и не понял, как избежать этой дорогостоящей перерисовки.
Кстати, если у кого-то из вас есть дополнительные идеи по оптимизации этого фрагмента, не стесняйтесь ответить.
Спасибо
---------- ОБНОВЛЕНИЕ 1 ----------
Основываясь на советах Арии, я обновил код (url) и добавил еще один тест, используя только верхний/левый. Основываясь на счетчике FPS, предоставленном Chrome, я вижу, что частота кадров более стабильна при использовании свойств сверху/слева с почти такой же частотой кадров. У вас есть идеи, могу ли я оптимизировать версию CSS3, чтобы иметь еще лучшую производительность? Я думал, что css3 с ускорением GPU будет быстрее, я, вероятно, сделал что-то не так.
---------- ОБНОВЛЕНИЕ 2 ----------
Я обновил свой код, чтобы использовать requestAnimFrame и запускать его только тогда, когда мне нужно перерисовать. И я обнаружил, что то, что убивает идеальный серый градиентный фон, который я определил в css, часто перерисовывалось и убивало производительность. Однако верхний/левый все же лучше, чем переход CSS :( с точки зрения чистой производительности.
