Home| Demo| Download| Guide

Performance Demonstration

As a demonstration of the speed and power of the HTML5 Web Database and the efficiency of the html5sql.js JavaScript library, I have created this little demonstration. Clicking the button below will cause the html5sql plugin to retrieve the sql from a separate file to populate a table with 11000 entries.

After completing this table creation this page will display the time it took for your computer and browser to complete this task, which should be no more than just a few seconds. Note, the time taken to download the sql file from the server is not taken into account so your actual wait may be a little longer than the results displayed.

START TEST
Run the test to see how your computer does.

After running this test, and if you have a browser with a built in client side database viewer like Google Chrome you can view the example table through that interface.

The javascript code utilized to make this happen is as follows:


$(function(){
    var demoRunning = false;

    $("#startTest").click(function(){
        if(!demoRunning){
            $(this).addClass("running");
            $("#demoRunning").show();
            $("#results").text("running...");
            demoRunning = true;
            try {
                html5sql.openDatabase("demo", "Demo Database", 5*1024*1024);

                $.get('demo-statements.sql',function(sql){
                    var startTime = new Date();
                    html5sql.process(
                        sql,
                        function(){ //Success
                            var endTime = new Date();
                            $("#results").text("Table with 11000 entries created in: " +
                                                ((endTime - startTime) / 1000) + "s");
                            $("#startTest").removeClass("running");
                            $("#demoRunning").hide();
                            demoRunning = false;
                        },
                        function(error, failingQuery){ //Failure
                            $("#results").text("Error: " + error.message);
                            $("#startTest").removeClass("running");
                            $("#demoRunning").hide();
                            demoRunning = false;
                        }
                    );
                });

            } catch (error) {
                $("#results").text("Error: " + error.message);
                $("#startTest").removeClass("running");
                $("#demoRunning").hide();
                demoRunning = false;
            }
        }
    })
});

As you can see, with html5sql.js and it doesn't take much to process a large number of sql statements in sequence.