есть ли разница в производительности между-transform translate и scroll
Я создаю веб-сайт карт, такой как google maps. Там будут плитки изображений, соединенных друг с другом. Карта будет исследоваться путем перетаскивания мышью, где после каждого перетаскивания будут загружаться новые изображения. Для того, чтобы иметь функциональность explore-by-Drag, я нашел два способа:
- вызов функций прокрутки для прокрутки до нужного места на карте
- применение css-transform translate на карте так, чтобы правая часть карты попадала в отображаемую область. область.
Вопрос в том, есть ли разница в производительности между этими методами? (главным образом с точки зрения скорости рендеринга и плавности перетаскивания) Кроме того, существуют ли какие-либо другие критерии для предпочтения одного из методов?
2 ответа:
Прокрутка лучше, потому что преобразования CSS могут вызвать повторные потоки документов, которые довольно дороги.
Работая над мобильной игрой, мы сделали нечто подобное.
Мы использовали библиотеку iScroll JS. http://cubiq.org/iscroll-4