Every unicode character

Demonstrates dynamically building an enormous document, in the background, without hanging.

by doug65536

HTML

<button id="start">Start</button>
<div id="info">
    <label>
        <input id="autoscroll" type="checkbox" checked />Autoscroll
    </label>
    <p id="speed"></p>
</div>

<div id="progress"><div id="progressbar"></div></div>
<div id="fasttable">
    <span id="end"></span>
</div>

CSS

#info {
    position: fixed;
    right: 8px;
    bottom: 8px;
    padding: 8px;
    background-color: white;
    border: solid black 1px;
    z-index: 2;
}
#info p {
    margin: 0px;
    padding: 0px;
}

#fasttable span, #fasttable span.cellhead {
    display: inline-block;
    width: 32px;
    height: 24px;
    line-height: 22px;
    font-size: 18px;
    padding: 4px 8px 4px 8px;
    margin: -1px;
    text-align: center;
    border: solid #EEE 1px;
}

#fasttable span.cellhead {
    width:64px;
    font-size: 14px;
    text-align: right;
    font-weight: bold;
    font-family: monospace;
}

#fasttable {
    display: block;
}

#progress {
    position: relative;
    width: 256px;
    height: 32px;
    border: solid black 1px;
    padding: 0px;
}

#progressbar {
    position: absolute;
    width: 0%;
    height: 100%;
    left: 0px;
    top: 0px;
    box-sizing: border-box;
    background-color: blue;
}

JavaScript

$(function() {
    "use strict";
    debugger;
    function startBuilding() {
        var tbl = $('#fasttable'),
            end = $('#end'),
            autoscroll = $('#autoscroll'),
            speed = $('#speed'),
            body = $('body'),
            autoscrollEnabled = autoscroll.is(':checked'),
            charCode = 0,
            lastTime = new Date(),
            startTime = lastTime,
            sinceLastTime = 0,
            maxScroll = Math.pow(2,30);
    
        autoscroll.on('change', function () {
            autoscrollEnabled = autoscroll.is(':checked');
        });
    
        function doSome() {
            var i, st = charCode, c = 1024,
                hex, now, elap, items = [],
                e = Math.min(0x110000, charCode + c),
                blockStart = new Date(),
                throttle,
                frag, div, span;
            frag = $();
            for (i = charCode; i < e; ) {
                hex = i.toString(16);
                if ((i & 15) === 0) {
                    div = $('<div/>');
                    div.append($('<span/>').attr('class', 'cellhead').text(hex));
                    //items.push('<div><span class="cellhead">0x',
                    //           hex, '</span>');
                }
                div.append($('<span/>').attr('title', '0x' + hex).html('&#' + hex + ';'));
                //items.push('<span title="0x', hex, '">&#x', hex, ';</span>');
                // Skip over surrogate pair range
                if ((i & 15) === 15) frag.append(div); //items.push('</div>');
                if (++i === 0xD800) i = 0xE000;
            }
            
            tbl.append(frag); //$(items.join('')));
            //$(items.join('')).insertBefore(end);
            
            $('#progressbar').css('width', (100 * i / 0x110000) + '%');
    
            if (autoscrollEnabled) {
                body.scrollTop(maxScroll);//body.prop('scrollHeight'));
            }
    
            sinceLastTime += e -...