I HATE BROWSERS :: pouët.net

I HATE BROWSERS

category: code [glöplog]

Hey guys!

I'm new to JavaScript demos. I played around with calculating stuff and found that my scripts got randomly slower. I digged deeper and found that browsers seem to slow down all scripts after some time of constant computation (like between 12 and 30 sedconds).

I tried both web workers and regular JS (the latter with the occasional setTimeout to keep the page responsive).

Craziest thing is that CPU always stays on 100% - while the script goes down to 10% of its speed.

Like. TF?

So...

Is there a way around this? You guys should know right?

The slow down thing is not even documented really I think. Chrome, Firefox and Opera all do this.

Test code:

Code:


<body onLoad="go()"><p>Count numbers: <output id="result"></output></p>
<script type="text/javascript">
    var startTime, i = 0;
    
    function go() {
      if (!startTime) startTime = new Date();
      while (true) {
        i = i+1;
        if ((i % 1000000) == 0) {
          var ms = new Date()-startTime;
          var mips = (i/ms/1000).toFixed(2);
          document.getElementById("result").innerHTML = "Counted to: " + i + " in " + ms + " ms ("
            + mips + " million steps/s)";
          setTimeout(go, 0);
          break;
        }
      }
    }
  </script></body>

Using web workers I can add a restart button that gets stuff back up to full speed for a couple seconds:

Code:


<body onLoad="go()"><p>Count numbers: <output id="result"></output></p>
<p><button onClick="restart()">Restart Worker</button></p>
<p><button>Dummy Button</button></p>
<script type="text/javascript">
    var worker;
    
    function restart() {
      worker.terminate();
      go();
    }
    
    function go() {
      cont(0);
    }
    
    function cont(i) {
      if (typeof(Worker) === "undefined") {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
        return;
      }
      document.getElementById("result").innerHTML = "Making web worker";
      worker = new Worker("worker.js");
      worker.onmessage = function(event) {
        var e = event.data;
        if (typeof(e) == "object" && e[0] == 'continue') {
          worker.terminate();
          //setTimeout(function() { cont(e[1]) }, 1000);
          cont(e[1]);
        } else
          document.getElementById("result").innerHTML = event.data;
      };
      worker.postMessage(i);
    }
  </script></body>

worker.js:

Code:


  addEventListener('message', function(e) {
        var startValue = e.data, i = startValue;
        postMessage("WORKING!");
        var startTime = new Date();
        while (true) {
          i = i+1;
          if ((i % 1000000) == 0) {
            var ms = new Date()-startTime;
            var mips = ((i-startValue)/ms/1000).toFixed(2);
            postMessage("Counted to: " + i + " in " + ms + " ms ("
              + mips + " million steps/s)");
            if (ms >= 4000) {
              postMessage(["continue", i]);
              break;
            }
          }
        }
      });

So I thought it's about the user clicking somewhere - but the dummy button doesn't do anything. Yet the restart button works.

If a worker sends a message to the main thread which then starts a new worker, the slow-down is NOT reversed.

Ok, TLDR: Browsers are slowing down my JavaScript after a couple seconds, whatever I do. Please advise.

Any help is very much appreciated!

Thanks in advance
xtraa

added on the 2018-02-28 19:42:25 by xtraa

might be something about browsers being typically on the look out for non responsive or interactivity blocking scripts? or garbage collecting?

you're supposed to use webworkers for computation intensive stuff anyways. or better yet, do it server side.

you also have requestAnimationFrame if you want constant updates.

added on the 2018-02-28 20:29:02 by psenough

A lot of things come to my mind, but I believe in this case your i is exceeding the integer range, and so the code is switching to floats and becoming slower. Check that.

added on the 2018-02-28 21:07:55 by romancortes

what did you open this thread from? a Browser? OOPS

added on the 2018-02-28 21:36:01 by nagz

At a moment the way it's all caps in title, I thought you were this guy

added on the 2018-02-28 23:15:13 by Optimus

write executables, like normal people.

added on the 2018-02-28 23:44:46 by abductee

Keep JS running as short as possible. The website waits for it to finish. No long loops.

setTimeout()/setInterval() is your friend.

added on the 2018-03-01 01:16:01 by Salinga

I HATE BROWSERS

login