Javascript 如何提高requestAnimationFrame性能？

这是我第一次尝试使用rAF创建平滑的动画，我想从经验丰富的开发人员那里获得一些见解。基本上，我有16个元素，它们的x、y坐标，在父容器上的mousemove上，所有元素都会朝相反的方向移动一定数量。当我在低端机器上进行测试时，会出现一些口吃。有什么我不知道的技术可以提高我的动画性能吗

(function ($) {
$(document).ready(() => {
const animCont = document.querySelector('.shop-header-container');
const animContWidth = animCont.offsetWidth;
const animContHeight = animCont.offsetHeight;
const leftOffset = animCont.getBoundingClientRect().left;
const topOffset = document.querySelector('#primary').offsetTop;
const animImgs = animCont.querySelectorAll('.elem');
let mouseX = 0;
let mouseY = 0;
let mouseOver = false;
let positions = [
  {
    id: 82,
    start: {
      x: 0.596,
      y: 0.654,
    },
    range: 0.4,
  }
...
]
positions.forEach(el => {
  el.target = {};
  el.current = {};
})
function updateElements(){
  mouseTargetX = (mouseX - leftOffset) / animContWidth;
  mouseTargetY = (mouseY + topOffset) / animContHeight;
  positions.forEach((el,i) => {
    if (mouseOver) {
      el.target.x = ((mouseTargetX - el.start.x) * -el.range + el.start.x ) * animContWidth;
      el.target.y = ((mouseTargetY - el.start.y) * -el.range + el.start.y ) * animContHeight;
    } else {
      el.target.x = el.start.x * animContWidth;
      el.target.y = el.start.y * animContHeight;
    }

    if(!el.current.x) {
      el.current.x = el.target.x;
      el.current.y = el.target.y;
    } else {
      el.current.x = el.current.x + (el.target.x - el.current.x)*0.1;
      el.current.y = el.current.y + (el.target.y - el.current.y)*0.1;
    }

    animImgs[i].style.transform = 'translate3d('+el.current.x+'px,'+el.current.y+'px,0)';
  })
  requestAnimationFrame(updateElements);
}
updateElements();
function animContMouseEnter(e){
  mouseOver = true;
}
function animContMouseLeave(){
  mouseOver = false;
}
function animContMouseOver(e){
  mouseX = e.clientX;
  mouseY = e.clientY;
}
animCont.addEventListener("mousemove",animContMouseOver,false);
animCont.addEventListener("mouseenter",animContMouseEnter,false);
animCont.addEventListener("mouseleave",animContMouseLeave,false);
});
}(jQuery));

---

这是js代码。

requestAnimationFrame只能做这么多。当涉及到浏览器性能时，您需要考虑触发哪些进程。优化您正在做的事情的一种方法可能是利用变换，而不是为每个触发的mousemove操纵x，y坐标。然后，一旦鼠标离开该区域，使用变换重新计算x，y。您似乎没有考虑当前时间（由requestAnimationFrame提供），这是一个完整的时间animation@DevinFields谢谢，这是一本有趣的书。你所说的“利用变换”到底是什么意思？我不是在使用css变换功能吗？@Bergi hi，你能更具体地说一下在制作动画时“考虑当前时间”吗？我想更多地了解这一点以及提高性能的每一种方法，但我如何准确地搜索信息呢？