Javascript水涟漪效应降低帧速率

我已经编写了一个超级简单的javascript来为一个网站创建一个水涟漪效果，如果效果相当好的话，我会产生错觉，但是我的计时器在很多实例中都有一些问题。最初我尝试使用一些CSS3效果来实现它，但是渲染元素的计算机会在一段时间后冻结屏幕，所以我重新编写它以反复更改单个PNG，这有很大帮助，但仍然陷入困境。我不知道如何改善这个问题，如果使用一些预加载可能会有所帮助（怀疑这一点），或者如果有一些其他优化可以修复这是一个非常有希望的开始

这是我的密码：

body{
    background-color:#444;
    position:absolute;
    overflow: hidden;
    z-index:0;}
.circle{
    position:absolute;
    background-image:url(circle5.png);
    background-size:cover;
    background-repeat:no-repeat;
    overflow:hidden;
    z-index:2;} 

还有javascript

var locX = '';
var checkX = '';
var locY = '';
var checkY = '';
var eventTimer = setInterval(function(){changeCs()}, 1);//'FRAMERATE' of state changes in milliseconds

//Listen for user mouse movement, fetch current location of cursor, initiate droplets
document.onmousemove = function(e){
    var event = e || window.event;
    locX = event.clientX;
    locY = event.clientY;
    createC();}

//We create divs with the circular image stretched to the otherwise blank div   
function createC(){
//Check to see if the X and Y are the same as in previous cycle, if so movement has stopped.
  if(parseInt(locX) != parseInt(checkX) && parseInt(locY) != parseInt(checkY)){
    var n_Circle = document.createElement('div');
    n_Circle.setAttribute('class','circle');
    n_Circle.setAttribute('style','width:10px;height:3px;opacity:.4;');
    document.body.appendChild(n_Circle);
//We obtain the coordinates of the cursor, and use the same X as the user.
//However with the Y we are shifting downward from the top to maintain illusion of water surface -*THINK EYE LEVEL*
    n_Circle.style.top = parseInt(.75 * window.innerHeight) + parseInt(locY * .4) + 'px';
    n_Circle.style.left = parseInt(locX) + 'px';
    window.setTimeout(function(){createC()},parseInt(Math.random() * 200 + 100));
  }else{return;}//EXIT Function loop
  //ASSIGN new check values before end ot the cycle
  checkX = locX;
  checkY = locY;

  }
//We manipulate the droplet images by this quantity every 'frame'
function changeCs(){
    var arrayCs = document.getElementsByClassName('circle');
    for(i=0; i < arrayCs.length; i++){
        arrayCs[i].style.width = parseInt(arrayCs[i].style.width) + 100 + 'px';
        arrayCs[i].style.left = parseInt(arrayCs[i].style.left) - 50 + 'px';
//The ratio of expansion does not match to the images aspect ratio.
//This helps to create the illusion of depth to the surface deformation
//by shearing a portion of the ellipse away, conveying a sense of depth and angularity
        arrayCs[i].style.height = parseInt(arrayCs[i].style.height) + 26 + 'px'; 
        arrayCs[i].style.top = parseInt(arrayCs[i].style.top) - 14 + 'px';
        arrayCs[i].style.opacity = arrayCs[i].style.opacity - .01;
        if(arrayCs[i].style.opacity <= .00){
            document.body.removeChild(arrayCs[i]);}}}

var locX=''；
var checkX=''；
变量locY=“”；
var-checkY=''；
var eventTimer=setInterval（函数（）{changeCs（）}，1）；//状态更改的帧速率（毫秒）
//监听用户鼠标移动，获取光标的当前位置，启动
document.onmousemove=函数（e）{
var event=e | | window.event；
locX=event.clientX；
locY=event.clientY；
createC（）；}
//我们创建div时，将圆形图像拉伸到其他空白div
函数createC（）{
//检查X和Y是否与上一个循环相同，如果相同，移动已停止。
if（parseInt（locX）！=parseInt（checkX）&parseInt（locY）！=parseInt（checkY））{
var n_Circle=document.createElement（'div'）；
n_Circle.setAttribute（'class'，'Circle'）；
n_Circle.setAttribute（'style'，'width:10px；height:3px；opacity:4；'）；
document.body.appendChild（n_圆）；
//我们获得光标的坐标，并使用与用户相同的X。
//然而，随着Y的移动，我们从顶部向下移动，以保持水面的错觉-*想想眼睛的高度*
n_Circle.style.top=parseInt（.75*window.innerHeight）+parseInt（locY*.4）+“px”；
n_Circle.style.left=parseInt（locX）+“px”；
setTimeout（function（）{createC（）}，parseInt（Math.random（）*200+100））；
}else{return；}//退出函数循环
//在循环结束前分配新的检查值
checkX=locX；
checkY=locY；
}
//我们每“帧”处理一次液滴图像
函数changeCs（）{
var arrayCs=document.getElementsByClassName（'circle'）；
对于（i=0；i如果（arrayCs[i].style.opacity看看这是否会带来不同，对我来说这似乎更快，但很难说，因为我对你的期望没有那么细微的差别。fiddler:

我不是每次都创建一个div元素，而是创建一次，然后克隆它。
我缓存了长度

    var locX = '';
    var checkX = '';
    var locY = '';
    var checkY = '';
    var eventTimer = setInterval(function(){changeCs()}, 1);//'FRAMERATE' of state changes in milliseconds
    var ln_Circle = document.createElement('div');
        ln_Circle.setAttribute('class','circle');
        ln_Circle.setAttribute('style','width:10px;height:3px;opacity:.4;');

  //  then just cloned it here:
    var n_Circle = ln_Circle.cloneNode(true);

 //   I also cached the length here:


            var l = arrayCs.length, i = 0;
            for(; i < l; i++){

效果的一个例子。另一个注意事项，我以前也尝试过使用CSS转换，但这似乎几乎立即锁定了我的浏览器。似乎任何一个笨手笨脚的CSS使用=browser freeze.Brilliant。似乎在多个渲染上都显著提高了帧速率和平滑度。我不确定我是否理解还有“for（；i          if( arrayCs[i]){
            arrayCs[i].style.width = parseInt(arrayCs[i].style.width) + 100 + 'px';