Page not loading until script loads and for loop consoles results after it's done

Question

I have this code, I'm just bored and I want to see how long it takes to crack passwords.

<!DOCTYPE html>
<html>
    <head>
        <title> Password Cracker </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <main>
            <h1> Password Cracker </h1>
        </main>
        <script defer>
            function makeid(length) {
                var result           = '';
                var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~`!@#$%^&*()-_=+{}|:;"<,>.?/';
                var charactersLength = characters.length;
                for ( var i = 0; i < length; i++ ) {
                  result += characters.charAt(Math.floor(Math.random() * 
             charactersLength));
               }
               return result;
            }
            var Passwords = [];
            var PasswordsTime = [];
            for (var count = 0; count < 30; count++){
                const d = new Date();
                let time = d.getTime();
                var pass = makeid(5)
                loopone:
                for (var i = 33; i <= 126; i++){
                    for (var j = 33; j <= 126; j++){
                        for (var k = 33; k <= 126; k++){
                            for (var l = 33; l <= 126; l++){
                                for (var m = 33; m <= 126; m++){
                                    if (String.fromCharCode(i, j,k,l, m) === pass){
                                        console.log("Password cracked!\nPassword = "  + pass);
                                        Passwords.push(pass);
                                        const e = new Date();
                                        let time2 = e.getTime();
                                        PasswordsTime.push(time2 - time1);
                                        break loopone;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            var sum = 0;
            for (var i = 0; i < PasswordsTime.length; i++){
                sum = sum + PasswordsTime[i];
                console.log("Password: " + Passwords[i]);
                console.log("Time: " + PasswordsTime[i]);
            } 
            console.log("Total Time: " + sum);
            console.log("Average time: " + (sum / 30));
        </script>
    </body>
</html>

The code works fine, but the h1 does not show until the script is finished which is lengthy, also, it console logs everything in the for loop after all the loops are done, rather than when each password is found, why?

JavaScript in the browser is single threaded and blocks the browser from being able to draw content or be responsive because the JavaScript may change the content of the page. If you want to run heavy computation in JavaScript you need to use web workers. — Wayne, May 15 '22 at 23:54

denis hebert · Answer 1 · 2022-06-12T16:20:33.380

1

Instead of "web workers" (complicated), the best workaround would be to wrap your Loopone: and its 5 for statements in a setTimeout of 0 ms, like this:

    setTimeout(i => {
        Loopone:
        // its 5 "for" statements
    }/* , 0 */);

In fact your problem is a mix of page Rendering and JIT compilation (by the browser) issue. Other Rendering solutions may be found here.

edited Jun 12 '22 at 16:20

answered May 16 '22 at 00:25

denis hebert

128
10

1

Webworkers are not that complicated, console.log() needs to be postMessage() and the worker is started with a worker.postMessage() from the main html a worker.addEventListener('message', function(e) { console.log(e.data);}, false); to listen for messages from the worker - DONE ... https://www.html5rocks.com/en/tutorials/workers/basics/ – Wayne May 16 '22 at 01:03
1

I'm fearful of how long a single password takes in this loop? – Wayne May 16 '22 at 01:04
Your answer is correct however :) – Wayne May 16 '22 at 01:06

Page not loading until script loads and for loop consoles results after it's done

1 Answers1