Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.02.2020, 18:16
Кандидат Javascript-наук
Отправить личное сообщение для drkrol Посмотреть профиль Найти все сообщения от drkrol
 
Регистрация: 09.10.2013
Сообщений: 114

Почему грузится CPU и как перенести нагрузку на GPU?
Здравствуйте. Я анимирую transform, однако наблюдаю высокую нагрузку на CPU.

Суть анимация такая: при наведении на блок, должно приблизится главное изображение и при перемещении мыши по этому блоку, изображение должно также перемещаться.
Видео: https://yadi.sk/i/XfepvkILc7_0oA
https://jsfiddle.net/j5bcuar3/5/

1. Почему грузится CPU? Ведь, как я понял, при анимации transform грузится CPU не должен.
2. Подскажите, возможно ли как-нибудь оптимизировать эту анимацию, чтобы немного снизить нагрузку и повысить плавность?
Ответить с цитированием
  #2 (permalink)  
Старый 27.02.2020, 18:37
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Видимо по этому

https://learn.javascript.ru/mousemov...ter-mouseleave
Ответить с цитированием
  #3 (permalink)  
Старый 27.02.2020, 19:58
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,743

$('.box').mousemove(function(event){
let widthPer = ~~(((event.pageX - this.offsetLeft))*100/this.offsetWidth) - 50,
  heightPer = ~~(((event.pageY - this.offsetTop))*100/this.offsetHeight) - 50;
  gsap.to(this.querySelector('picture'),{
    duration:1,
    x:(widthPer/4)*(-1) + "%",
    y:(heightPer/4)*(-1) + "%",
    overwrite: true,
    ease: "power2.out"
  });
});


Я не знаю, что делает gsap.to, но знаю, что она вызывается на каждое событие move. Фактически каждые 15-16 ms. Если там идет изменение стиля (встроенного или табличного), то это заставляет браузер каждые 15-16 ms перерассчитывать элементы. А это делается CPU, а не GPU/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему onload срабатывает до того как картинка полностью проявится? koeshiro Общие вопросы Javascript 21 24.06.2013 14:50
как перенести содержимое ответа браузера в диалоговое окно TommyTunec Элементы интерфейса 0 15.04.2013 11:36
тег form почему и как исправить jonix Общие вопросы Javascript 8 11.12.2012 06:29
vkontakte, html5 и как почему не перезагружается страница olga153b Events/DOM/Window 10 02.11.2011 15:20
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19