current community

your communities

more stack exchange communities

Stack Exchange
tour help
Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 5 down vote favorite

Today, my project was to make a matrix in my web browser. It is really slow, so help with optimizing it would be nice. It runs slow on my PC, yet alone my iPod 4 which this is going to be for.

<html>
<head>
    <title>Matrix</title>
    <style type="text/css">
        body {
            background-color:black;
            background-size: 100%;

        }
        #mat {
            font-size:8px;
            font-family:"Courier";
            font-weight:bold;
        }

    </style>

<body onLoad="randomMatrix()">


<div id="mat">
    <span style="color:#005400"> hi </span><span>hi</span>
</div>

<script type="text/javascript">

    function randomLine()
    {
        var text = "<span>";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for(var i=0; i < 63; i++ ) text += "</span><span style=\"color:"+randomGreen()+"\">"+possible.charAt(Math.floor(Math.random() * possible.length));

        return text;
    }

    function randomMatrix() {
        document.getElementById("mat").innerHTML = randomLine();
        for(var i = 0; i<45;i++) document.getElementById("mat").innerHTML += "<br/>"+randomLine();
        sleep(125, randomMatrix);
    }

    function sleep(millis, callback) {
    setTimeout(function()
            { callback(); }
    , millis);
    }

    function randomGreen() {
        return "#00"+randInt(0,255).toString(16)+"00";
    }

    function randInt(min,max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }


</script>

</body>
</html>

You can try it out here. ANY speed improvements would greatly help!

share|improve this question

1 Answer 1

up vote 6 down vote accepted

Here's what I did

var theMatrix = (function (containerId, lines, columns) {
    // We wrap everything in a closure, and expose only a single
    // global. Avoids global pollution, and keeps everything in
    // one place.

    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

    // We break functionality into functions, naming verbosely
    function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function randomGreen() {
        return "#00" + randomInt(0, 255).toString(16) + "00";
    }

    function randomLetter() {
        return characters.charAt(Math.floor(Math.random() * characters.length));
    }

    function generateLine(columns) {
        var line = document.createElement('div');
        while (columns--) {
            var letter = document.createElement('span');
            letter.style.color = randomGreen();
            letter.innerHTML += randomLetter();
            line.appendChild(letter);
        }
        return line;
    }

    function writeLines(container, lines, columns) {
        for (var i = 0; i < lines; i++) {
            container.appendChild(generateLine(columns));
        }
    }

    function startMatrix(container,columns) {
        setInterval(function loop() {
            // Instead of rebuilding the DOM all at once, we change
            // by line, by removing the top line, and appending
            // at the bottom.
            var firstLine = container.firstChild;
            container.removeChild(firstLine);
            container.appendChild(generateLine(columns));

            // Also, used doesn't care, you can replace the line
            // before this with the following line to cycle the
            // lines instead of regenerating the last line
            //container.appendChild(firstLine);
        }, 50);
    }

    // The exposed function. The only function that "keeps state"
    // (knows instance settings). All other function are reusable
    // and are not bound to a single call
    return function (containerId, lines, columns) {
        var container = document.getElementById(containerId);

        // we write the initial lines
        var textNodes = writeLines(container, lines, columns);

        // start the matrix
        startMatrix(container,columns);
    };
}());


theMatrix('mat', 50, 80);
share|improve this answer
    
This is great! It even runs decently on my iPod! –  nimsson Apr 5 '14 at 11:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.