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

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

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

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


scroll html css css-transforms draggable
person ali gurbuz    schedule 13.02.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

person Diodeus - James MacFarlane    schedule 14.02.2012
comment
Я понимаю, что это старая тема, но сегодня я исследовал ее и наткнулся на этот тест, который показывает, что прокрутка на 97% медленнее, чем перевод: jsperf.com/translate3d-vs-xy/76 - person powerbuoy; 05.12.2017
comment
Этот тест jsperf в лучшем случае вводит в заблуждение, выполнение установки стиля в цикле будет означать, что только последний имеет какой-либо эффект, поэтому, конечно, это будет быстрее, чем фактическая установка положения прокрутки. - person blackmamba; 14.06.2018

arrow_upward
0
arrow_downward

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

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

person jdavid.net    schedule 14.03.2012