Javascript 无法实现每秒60帧的动画

我真的想实现60帧/秒的动画效果。具体地说，在焦点事件的输入元素上。根据Chrome开发者工具，我能达到的最高fps大约是18fps

我正在使用所有被认为是最佳实践的东西：JavaScript中的window.requestAnimationFrame，将在css中更改，并且我正在使用实际动画的转换。即使将所有这些设置到位，我的动画也不会接近60帧/秒

var form={}； 函数addActiveelement{ element.highlightElement.classList.addinput-highlight-active； } 函数移除激活元素{ element.highlightElement.classList.removeinput-highlight-active； } //循环遍历整个对象，删除除目标元素之外的所有元素上的活动类。 函数setNewStateelement，id，obj{ 对于obj中的var键{ 如果id==key{ window.requestAnimationFrame=>addActiveelement； }否则{ removeActiveobj[按键]； } } } //捕获要传递给setNewState函数的event.target.id和相应对象 功能手柄{ var active=形式[e.target.id]； var activeId=e.target.id； setNewStateactive，activeId，form； } //将焦点事件侦听器添加到html元素 函数加法器{ var inputElements=document.querySelectorAll'.input包装器>输入'； inputElements=Array.frominputElements； inputElements.mapel=>el.addEventListener'focus'，e=>handleEvente； } //使用输入id作为对象键创建对象 函数初始化{ var temp={}； var inputElements=document.querySelectorAll'.input包装器>输入'； 对于变量i=0；i在您提供的代码中，您正在使用CSS动画，只需应用额外的类。不需要调用requestAnimationFrame，因为它被设计为通过回调多次调用

由于您利用了CSS动画，因此只需添加一个在聚焦时改变比例的类，然后就可以在模糊时删除该类：

.input-highlight-active {
    transform: scaleX(1);
}

因为输入已经有一个类，在该类中，转换值指定它将为所有能够设置动画的属性设置动画，所以您只需要指定设置动画的属性更改

---

请不要将您的代码发布到第三方网站，因为这些链接可能会随着时间的推移而消失，使您的问题对任何遇到它的人来说都毫无意义。总是把你的代码和你的问题一起发布在这里。根据Chrome开发者工具，我能达到的最高fps大约是18fps。要添加对性能有实际影响的类，需要使用大量JavaScript…是不是从侧面滑入一个稍微厚一点的底部条，以实现聚焦等效果？如果是这样的话，你愿意把它一分为二，全部放在合成器线程上吗？无论如何，我不能在一台相当低端的计算机上复制它，它的速度是60 FPS。你在用什么样的设备？你有没有尝试过简单的宽度转换，没有优化尝试？谢谢你的反馈！所以我删除了window.requestAnimationFrame。从你的帖子中我了解到，使用will change和transform将在有能力的情况下提供最佳性能？我不认为will change是必要的，甚至不建议这样做。但是CSS动画确实提供了最好的性能。requestAnimationFrame计划一次调用一个函数。很多时候，该函数会再次调用requestAnimationFrame，但这里没有，因此没有每秒添加60次的类。@Ry-你说得太对了！非常感谢。我更正了我的答案。