Dynamic matrix in web browser 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.

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

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

    &lt;/style&gt;

&lt;body onLoad="randomMatrix()"&gt;


&lt;div id="mat"&gt;
    &lt;span style="color:#005400"&gt; hi &lt;/span&gt;&lt;span&gt;hi&lt;/span&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;

    function randomLine()
    {
        var text = "&lt;span&gt;";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

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

        return text;
    }

    function randomMatrix() {
        document.getElementById("mat").innerHTML = randomLine();
        for(var i = 0; i&lt;45;i++) document.getElementById("mat").innerHTML += "&lt;br/&gt;"+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;
    }


&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;


You can try it out here. ANY speed improvements would greatly help!
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 &lt; 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);