简体   繁体   中英

Unresponsive Google Chrome while running HTML5 Web workers

I am using the following code to run webworker to fune prime numbers in a web page in the latest Google Chrome

https://dl.dropbox.com/u/655237/project/prime.html

However after clicking the start Worker button, the stop button becomes unresponsive for some time. After 30 second or so it becomes active when it is mouse hovered. This does not happen in Firefox.

Is there any flaw in the code ?

prime.html

        <section>
            Last Prime Found:-  <p id="number">NA</p>
            <button id="prime">Find &nbsp; Prime</button>
            <button id="primew">Start &nbsp;Worker</button>
            <button id="primes">Stop &nbsp;Worker</button>
        </section>
        <script>
            var worker;
            document.querySelector('#prime').addEventListener('click', function () {
                findPrime();
            }, false);
            document.querySelector('#primew').addEventListener('click', function () {
                findPrimeW();
            }, false);
            document.querySelector('#primes').addEventListener('click', function () {
                stopWorker();
            }, false);

            function findPrime(){
                var n = 1;
                search: while (true) {
                    n += 1;
                    for (var i = 2; i <= Math.sqrt(n); i += 1)
                        if (n % i == 0)
                            continue search;
                    // found a prime!
                    document.querySelector("#number").textContent=n;
                }
            }
            function findPrimeW(){
                worker = new Worker('js/worker1.js');
                worker.onmessage = function (event) {
                    document.querySelector("#number").textContent = event.data;
                };
            }

            function stopWorker()
            { 
                worker.terminate();
            }
        </script>

worker1.js

    var n = 1;
search: while (true) {
  n += 1;
  for (var i = 2; i <= Math.sqrt(n); i += 1)
    if (n % i == 0)
     continue search;
  // found a prime!
  postMessage(n);
}

Another example is this https://dl.dropbox.com/u/655237/events/gdg-html5/index.html#/webworkers

You can not change the slide for a some time after clicking "Start Worker" button. Ideally it should not happen as the heavy weight computation is delegated to a separate web worker.

I believe this conversation is relevant here: https://code.google.com/p/chromium/issues/detail?id=85686

After trying it out myself, LatinSuD's comment seems right:

I think I have an explanation. There is too much communication between worker and main page. I modified the worker to only report one prime number each 1000, and it works smooth. Kind of "prime numbers density is too high in the first millions".

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM