Вече всички знаем, особено от тази хубава статия, че трябва да предпочитаме css-трансформации пред анимирана позиция.
Но имаме избор между translate() и translate3d()...
Кой е като цяло по-бърз?
производителност на translate3d срещу translate
comment
след моя тест в хром. открих, че translateX е по-бърз от translate3d, чувствам се озадачен въведете описание на изображението тук въведете описание на изображението тук
- person Nic_Xu schedule 30.05.2019
Отговори (3)
Този сайт по-долу провежда тестове, сравняващи translate(), translate3d() и няколко други свойства. Според него translate3d() е по-бърз в повечето браузъри.
http://jsperf.com/translate3d-vs-xy
person
Cameron Little
schedule
10.03.2014
Този тест е фалшив, този въпрос е относно производителността на изобразяване - което изобщо не е тествано в този jsperf
- person Niko Sams; 30.03.2015
@abernier не, не можете да сравните това с jsperf. За сравнение можете да използвате Timeline на инструментите за разработка на chrome.
- person Niko Sams; 14.03.2016
Бих искал да получа някои актуални твърди данни за производителността на RENDERING, тъй като все още съм объркан за истинската разлика между 2D и 3D преводи и дали конвертирането на анимации в 3D от 2D е просто микрооптимизация. Всички статии и ресурси, които намирам, са на 3 и 4+ години.
- person Brett84c; 09.06.2017
За моя случай преводът е по-бърз. не translate3d
- person slideshowp2; 21.09.2017
Този тест е фалшив, защото всяка една версия на chrome има много различни резултати. Изобщо не мога да вярвам на това. Много по-добър тест би бил просто да ми позволите да ВИЖДАМ анимациите, не?
- person Simon_Weaver; 26.02.2019
Използването на translate3d тласка CSS анимациите към хардуерно ускорение. Дори ако искате да направите основен 2d превод, използвайте translate3d за повече мощност! Така че „T3d“ е просто по-добро, защото казва на CSS анимациите да прокарат анимациите в 3D мощност! Ето защо е по-бързо. (Отговорът на Камерън Литъл е доказателството)
person
AFCA_Timon
schedule
11.03.2014
Ами ако искам да превеждам само вертикално? Бих използвал translateY() за това. Но как мога да постигна вертикален превод само с translate3d?
- person Limpuls; 09.12.2019
@Limpuls преди всичко: трябва да зададете своя въпрос. Второ: Просто задайте стойността
y на translate3d за преместване по вертикалната ос. transform: translate3d(0, 42px, 0);
- person Florian; 11.12.2019
Както Камерън предложи translate3d трябва да бъде по-бърз в много браузъри, най-вече тези, които използват gfx хардуерно ускорение за ускоряване на изобразяването. особено на webkit translate3d беше предпочитаният начин за принудително хардуерно ускорение на елементи на страница.
въпреки че според опита на mit понякога има един недостатък при използването на 3d трансформации - в определени комбинации браузър-версии/os (osx+safari, гледам ви) хардуерно ускореното изобразяване може леко да промени изглаждането на шрифта, както и интерполацията, като по този начин причинява незначително трептене или размазване. тези ситуации в повечето случаи могат да бъдат заобиколени, но трябва да се имат предвид.
person
roman
schedule
11.03.2014
Съгласен. Това се появява често в моя случай. Chrome на Mac.
- person AlbertSamuel; 29.11.2017
