Javascript 动画变慢

我有一段代码，在一段时间后开始变慢，我尝试了所有方法来减少脚本并提高性能，但没有任何效果。
下面是代码片段：

var=false；
函数加载（）{
设定间隔（雨，100）；
函数雨（）{
var deg=旋转？0:20；
var变量=screen.width+screen.width；
var side=Math.floor（（Math.random（）*变量））；
var pos=-20；
var-element=document.createElement（'div'）；
var position=Math.random（）<0.5？1:3；
element.style.WebKittTransform='旋转（'+deg+'deg'）；
element.style.mozTransform='旋转（'+deg+'deg'）；
element.style.msTransform='旋转（'+deg+'deg'）；
element.style.oTransform='旋转（'+deg+'deg'）；
element.style.transform='旋转（'+deg+'deg'）；
element.style.position=“绝对”；
element.style.width=“1px”；
element.style.height=“10px”；
element.style.top=“-20px”；
element.style.zIndex=位置；
document.getElementById（'body'）.appendChild（元素）；
如果（位置==3）{
element.style.backgroundColor=“#0018FF”；
}
如果（位置==1）{
element.style.backgroundColor=“#8590FF”；
}
element.style.left=side+'px'；
设置间隔（帧，1）；
设置间隔（第2帧，第2帧）；
设置间隔（帧检查器，100）；
函数框架（）{
pos++；
element.style.top=pos+'px'；
}
函数框架2（）{
边--；
element.style.left=side+“px”；
}
函数frameChecker（）{
element.id=pos；
如果（element.id>screen.height+500）{
元素。移除（）；
}
}
}
}

正文{
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
}
html，
身体{
填充：0px；
边际：0px；
宽度：100%；
身高：100%；
溢出：隐藏；
背景颜色：黑色
}
.中心{
排名：0；
底部：0；
右：0；
左：0；
保证金：自动；
位置：绝对位置；
文本对齐：居中；
z指数：2；
}
.中跨{
位置：相对位置；
字体大小：500%；
文本对齐：居中；
最高：45%；
转化：translateY（-50%）；
颜色：白色
}

得到404错误
错误404

每次您的

rain（）

函数由于其间隔计时器（每100毫秒）而运行时，它都会以更快的间隔启动三个新的间隔计时器。因此，大约一分钟后，您将运行数百个间隔计时器。这就是让一切变慢的原因

您可以考虑嵌套函数的<代码> SETIMEOUT（）/CUT>。

setTimeout

函数只在一次延迟后调用它的回调一次。

所以我这样做了：

每100毫秒添加一个点，此点开始3个功能/dot移动并检查其位置，因此我只添加了一个“间隔清理器”（

frameChecker（）

如果

设置以下是代码：

身体{
字体系列：“新罗马时代”，时代，衬线；}
html，正文{
填充：0px；
边际：0px；
宽度：100%；
身高：100%；
溢出：隐藏；
背景色：黑色}
.中心{
排名：0；
底部：0；
右：0；
左：0；
保证金：自动；
位置：绝对位置；
文本对齐：居中；
z-索引：2；}
.中跨{
位置：相对位置；
字体大小：500%；
文本对齐：居中；
最高：45%；
转化：translateY（-50%）；
颜色：白色}
var=false；
函数加载（）{
设定间隔（雨，200）；
函数雨（）{
var deg=旋转？0:20；
var变量=screen.width+screen.width；
var side=Math.floor（（Math.random（）*变量））；
var pos=-20；
var-element=document.createElement（'div'）；
var position=Math.random（）<0.5？1:3；
element.style.WebKittTransform='旋转（'+deg+'deg'）；
element.style.mozTransform='旋转（'+deg+'deg'）；
element.style.msTransform='旋转（'+deg+'deg'）；
element.style.oTransform='旋转（'+deg+'deg'）；
element.style.transform='旋转（'+deg+'deg'）；
element.style.position=“绝对”；
element.style.width=“1px”；
element.style.height=“10px”；
element.style.top=“-20px”；
element.style.zIndex=位置；
document.getElementById（'body'）.appendChild（元素）；
如果（位置==3）{element.style.backgroundColor=“#0018FF”；}
if（position==1）{element.style.backgroundColor=“#8590FF”；}
element.style.left=side+'px'；
var framee=setInterval（第1帧）；
var framee2=setInterval（frame2，2）；
var frameCheckerr=setInterval（frameChecker，100）；
函数框架（）{
pos++；
element.style.top=pos+'px'；}
函数框架2（）{
边--；
element.style.left=side+“px”；}
函数frameChecker（）{
element.id=pos；
if（element.id>screen.height+20）{element.remove（）；clearInterval（framee）；clearInterval（framee2）；clearInterval（frameCheckerr）；}
得到404错误
错误404

它使点只移动一次（一个像素），这是我缺少的吗？@qwertytroll3我不知道你想做什么，但添加了一个“点”每隔100毫秒，然后为每一个运行三个计时器肯定会让系统在一段时间后陷入困境。我的意思是，想想看，一分钟后会有1800个计时器运行。这是不可持续的。是的，这就是为什么我现在将它添加到

frameChecker（）

if（element.id>screen.height+500）{element.remove（）；clearInterval（framee）；clearInterval（framee2）；clearInterval（frameCheckerr）；}}}}}}

并添加了这些

clearInterval

指向之前刚刚拥有

元素的计时器。remove