Question

我有这段代码，过了一会儿开始变慢，我尝试了一切以减少脚本并提高性能，但是没有任何效果。
这是代码片段：

A=
     1    -3     3
     3    -5     3
     6    -6     4

Numpy:
w, v = np.linalg.eig(A)

w
array([ 4. +0.00000000e+00j, -2. +1.10465796e-15j, -2. -1.10465796e-15j])


v
array([[-0.40824829+0.j        ,  0.24400118-0.40702229j,
             0.24400118+0.40702229j],
           [-0.40824829+0.j        , -0.41621909-0.40702229j,
            -0.41621909+0.40702229j],
           [-0.81649658+0.j        , -0.66022027+0.j        , -0.66022027-0.j        ]])

Matlab:
[E, D] = eig(A)
E

   -0.4082   -0.8103    0.1933
   -0.4082   -0.3185   -0.5904
   -0.8165    0.4918   -0.7836
D

    4.0000         0         0
         0   -2.0000         0
         0         0   -2.0000

var rotated = false;

function load() {
  setInterval(rain, 100);

  function rain() {
    var deg = rotated ? 0 : 20;
    var variable = screen.width + screen.width;
    var side = Math.floor((Math.random() * variable));
    var pos = -20;
    var element = document.createElement('div');
    var position = Math.random() < 0.5 ? 1 : 3;
    element.style.webkitTransform = 'rotate(' + deg + 'deg)';
    element.style.mozTransform = 'rotate(' + deg + 'deg)';
    element.style.msTransform = 'rotate(' + deg + 'deg)';
    element.style.oTransform = 'rotate(' + deg + 'deg)';
    element.style.transform = 'rotate(' + deg + 'deg)';
    element.style.position = "absolute";
    element.style.width = "1px";
    element.style.height = "10px";
    element.style.top = "-20px";
    element.style.zIndex = position;
    document.getElementById('body').appendChild(element);
    if (position == 3) {
      element.style.backgroundColor = "#0018FF";
    }
    if (position == 1) {
      element.style.backgroundColor = "#8590FF";
    }
    element.style.left = side + 'px';
    setInterval(frame, 1);
    setInterval(frame2, 2);
    setInterval(frameChecker, 100);

    function frame() {
      pos++;
      element.style.top = pos + 'px';
    }

    function frame2() {
      side--;
      element.style.left = side + "px";
    }

    function frameChecker() {
      element.id = pos;
      if (element.id > screen.height + 500) {
        element.remove();
      }
    }
  }
}

body {
  font-family: "Times New Roman", Times, serif;
}

html,
body {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black
}

.center {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  position: absolute;
  text-align: center;
  z-index: 2;
}

.center span {
  position: relative;
  font-size: 500%;
  text-align: center;
  top: 45%;
  transform: translateY(-50%);
  color: white
}

整个JavaScript代码都是为了下雨，我认为问题出在变量的某个地方，但是当我设置为global时，只会出现一个点的“ rain”（通过全局，我指的是任何函数之外）

Answer 1

所以我做到了：

每100毫秒添加一个点，该点以3个功能/点开始移动并检查其位置，因此我刚刚添加了“间隔清洁器”，（frameChecker() if的位置是代码：

<!DOCTYPE html>
<html>
<head>
 <style>
  body{
   font-family: "Times New Roman", Times, serif;}
  html, body{
   padding: 0px;
   margin: 0px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background-color: black}
  .center {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    position: absolute;
    text-align: center;
    z-index: 2;}
  .center span{
	position: relative;
    font-size: 500%;
    text-align: center;
    top: 45%;
    transform: translateY(-50%);
    color: white}
 </style>
 <script type="text/javascript">
  var rotated = false;
  function load(){
    setInterval(rain, 200);
   function rain(){
     var deg = rotated ? 0 : 20;
     var variable = screen.width+screen.width;
     var side = Math.floor((Math.random() * variable));
     var pos = -20;
     var element = document.createElement('div');
     var position = Math.random() < 0.5 ? 1 : 3;
     element.style.webkitTransform = 'rotate('+deg+'deg)'; 
     element.style.mozTransform    = 'rotate('+deg+'deg)'; 
     element.style.msTransform     = 'rotate('+deg+'deg)'; 
     element.style.oTransform      = 'rotate('+deg+'deg)'; 
     element.style.transform       = 'rotate('+deg+'deg)'; 
     element.style.position = "absolute";
     element.style.width = "1px";
     element.style.height = "10px";
     element.style.top = "-20px";
     element.style.zIndex = position;
     document.getElementById('body').appendChild(element);
     if (position == 3){element.style.backgroundColor = "#0018FF";}
     if (position == 1){element.style.backgroundColor = "#8590FF";}
     element.style.left = side + 'px';
     var framee = setInterval(frame, 1);
     var framee2 = setInterval(frame2, 2);
     var frameCheckerr = setInterval(frameChecker, 100);
     function frame() {
      pos++;
      element.style.top = pos + 'px';}
     function frame2() {
      side--;
      element.style.left = side + "px";}
     function frameChecker(){
      element.id = pos;
      if (element.id > screen.height+20){element.remove();clearInterval(framee);clearInterval(framee2);clearInterval(frameCheckerr);}}}}
 </script>
  <title>GOT 404 ERROR</title>
</head>
<body onload="load()" id="body">
 <div style="width:100%; height:100%; position: relative;">
  <div class="center"><span>ERROR 404</span></div>
 </div>
</body>
</html>

筹集资金实在是小事，这要感谢@Pointy讲到在用setInterval()调用后函数一直处于打开状态，并且第一个计时器（rain()）可以与计时器集一起使用500以获得更好的性能

Answer 2

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

对于这些嵌套函数，您可以考虑使用setTimeout()。 setTimeout函数在一个延迟后仅调用一次回调。

动画放慢

2 个答案: