есть ли разница в производительности между -transform translate и scroll

Question

Я создаю веб-сайт для карт, например, Google Maps. Там будут плитки изображений, связанных друг с другом. Карта будет исследована путем перетаскивания мышью, где после каждого перетаскивания будут загружаться новые изображения. Для того, чтобы иметь возможность исследовать путем перетаскивания, я нашел два способа:

1. вызов функций прокрутки для прокрутки в нужное место на карте
2. применение преобразования css-transform к карте, чтобы правая часть карты попала в отображаемую область.

Вопрос в том, есть ли разница в производительности между методами? (в основном с точки зрения скорости рендеринга и плавности перетаскивания) Кроме того, есть ли другие критерии для предпочтения одного из методов?

Answer 1

Прокрутка лучше, потому что преобразования CSS могут вызвать повторные потоки документов, которые довольно дороги.

См .: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

Answer 2

Работая над мобильной игрой, мы сделали что-то подобное.

Мы использовали библиотеку iScroll JS.http://cubiq.org/iscroll-4