Question

嗨我有一个简单的脚本，可以在屏幕上放置随机点。使用Javascriot和CSS 这很有效，使用CSS可以轻松控制某些事情。

唯一的事情是......在30,000点之后......真的慢了下来。要抓狂了我想让它至少进入数百万个点而不会陷入困境。我有一台非常强大的计算机，并且发现结果与浏览器相同。

<!doctype html><html><head>
<meta charset="utf-8">
<title>Ran Dots</title>

<style>
    body{
    background-color:#C82022;
    }
    .dot {
        position: absolute;
        width: 2px;
        height: 2px;
        background: black;
    }
</style>

</head><body>

<form id="form1" name="form1" method="post" action="">
  <label for="textfield">num of dots</label>
  <input type="text" id="num_of_dots" value="0" />
</form>

<script>
//
function createDot(x, y){
    var elem = document.createElement("div");
    elem.setAttribute("class", "dot");
    elem.setAttribute("style", "left:"+x+"px;top:"+y+"px;");
    document.getElementsByTagName("body")[0].appendChild(elem);
    return elem;
}
//

var Count_Num_Of_Dots = 0;
//
function Add_Dot(){

        if(Count_Num_Of_Dots < 1000000){

            createDot(Math.floor(Math.random()*1900), Math.floor(Math.random()*870 + 40));
            Count_Num_Of_Dots ++;
            document.getElementById('num_of_dots').value ++;

        }else{// stop timer

            clearInterval(My_Timer_Var);

        }
}
//

// Timer
var My_Timer_Var = setInterval(function(){ Add_Dot() }, .05);
</script>

</body></html>

任何人都可以告诉我：

什么不可避免地导致它减速？
我怎样才能保持这些点有效且高速运转到数百万个点？
也许有更好的方法可以做到这一点？

谢谢

问候。

Answer 1

什么不可避免地导致它减速？

这可能是因为DOM查找的时间复杂性。请检查this。

如何保持这些点有效且速度快数以百万计的点？

最小化DOM查找或获得更好的处理器。

也许有更好的方式来做这个？

此外，可能有更好的方法。你应该采用不同的技巧和措施。

随机点Javascript / CSS开始运行真的很慢

1 个答案: