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

Създавам уебсайт с карти като Google Maps. Ще има плочки от изображения, свързани помежду си. Картата ще бъде изследвана чрез плъзгане с мишката, където след всяко плъзгане ще се зареждат нови изображения. За да имам функция за изследване чрез плъзгане, намерих два начина:

  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