Javascript 固定GPU密集型动画帧
多亏了这个漂亮的框架。代码工作正常，但不幸的是，有一个问题使得代码完全无用 它花费了我90%以上的GPU资源！显然，我的笔记本电脑在运行10秒钟后就开始发热了 为什么会发生这种情况以及如何解决 更新：我认为问题在于代码甚至在图像后面渲染动画， 如果您评论Javascript 固定GPU密集型动画帧,javascript,html,css,Javascript,Html,Css,多亏了这个漂亮的框架。代码工作正常，但不幸的是，有一个问题使得代码完全无用 它花费了我90%以上的GPU资源！显然，我的笔记本电脑在运行10秒钟后就开始发热了 为什么会发生这种情况以及如何解决 更新：我认为问题在于代码甚至在图像后面渲染动画， 如果您评论addimage（），您可以看到这一点 您可以自己测试它： 请 下面是代码：（我们使用addimage（）函数向页面添加一个图像，其余的都是CSS和HTML） addimage（）； 函数addimage（）{ 让图片资源https://www
addimage（）addimage（）addimage（）；
函数addimage（）{
让图片资源https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg';
var节点=document.getElementsByClassName（'content'）；
节点[0]。style.background='url（'+pictureSource+''）中心/封面'
}正文{
高度：100vh；
保证金：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：黑色；
}
.box{
边界半径：10px；
背景：
重复线性渐变（-45度，白色0.7.5px，粉色0.15px）
0 0/21.21px 21.21px；/*21.21px=sqrt（2）*15px*/
动画：动画1s线性无限；
}
.box.content{
宽度：计算（90vw-30px）；
高度：计算（85vh-30px）；
边界半径：10px；
盒影：0 0 2px深粉色，0 0 5px rgba（0,0,0,1），插入0 0 5px rgba（0,0,0,1）；
利润率：15px；
}
@关键帧设置动画{
到{
背景位置：21.21px 21.21px；
}
}我认为动画的背景位置有点贵。检查以下代码是否正常工作。我只是对动画使用了transform属性，而不是背景位置
addimage（）；
函数addimage（）{
让图片资源https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg';
var节点=document.getElementsByClassName（'content'）；
节点[0]。style.background='url（'+pictureSource+''）中心/封面'
}正文{
高度：100vh；
保证金：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景颜色：灰色；
}
.盒子{
边界半径：10px；
位置：相对位置；
溢出：隐藏；
}
.box：：之后{
内容：''；
位置：绝对位置；
z指数：-1；
排名：0；
右：0；
底部：0；
左：0；
背景：
重复线性梯度（-45度，白色0 7.5px，粉红色0 15px）0 0/21.21px 21.21px；
宽度：计算值（100%+21.21px）；
高度：计算（100%+21.21px）；
转换：转换（-21.21px，-21.21px）；
/*转换：转换（-15px，-15px）*/
/*变换：平移（0,0）*/
动画：动画1s线性无限；
}
.box.content{
宽度：计算（90vw-30px）；
高度：计算（85vh-30px）；
边界半径：10px；
盒影：0 0 2px深粉色，0 0 5px rgba（0,0,0,1），插入0 0 5px rgba（0,0,0,1）；
利润率：15px；
}
@关键帧设置动画{
到{
/*背景位置：21.21px 21.21px*/
变换：平移（0,0）；
}
}