Constructing HTML table in JavaScript, from Acces DB via ADODB

Question

As a JavaScript noob, I have just made a little script, that constructs a table from data in an Access Database. But it takes 30 seconds to construct the table, even though the data only consists of 1720 lines. How can I improve that time? (I only have JavaScript, not PHP etc.)

<html>
<body>
<script type="text/javascript">
    function loadDB() {
    var body = document.body,
        tbl  = document.createElement('table');
    tbl.style.width='100px';
    tbl.style.border = "1px solid black";
    var connection = new ActiveXObject("ADODB.Connection");
    var ConnString = "Data Source=S:/queries.accdb;;Provider=Microsoft.ACE.OLEDB.12.0;";
    connection.open(ConnString);
    var rs = new ActiveXObject("ADODB.Recordset");
    rs.Open("SELECT * from tblPosterSager", connection);
    rs.MoveFirst();
    while (!rs.eof) {
        var tr = tbl.insertRow();
        var Team = tr.insertCell();
        Team.appendChild(document.createTextNode(rs.fields("Team")));
        Team.style.border = "1px solid black";
        var Ktonr = tr.insertCell();
        Ktonr.appendChild(document.createTextNode(rs.fields("Account")));
        Ktonr.style.border = "1px solid black";
        var Valuedate = tr.insertCell();
        Valuedate.appendChild(document.createTextNode(rs.fields    ("Valuedate")));
        Valuedate.style.border = "1px solid black";
        var Valuta = tr.insertCell();
        Valuta.appendChild(document.createTextNode(rs.fields("Currency")));
        Valuta.style.border = "1px solid black";
        var Belob = tr.insertCell();
        Belob.appendChild(document.createTextNode(rs.fields("Amount")));
        Belob.style.border = "1px solid black";
        var DC = tr.insertCell();
        DC.appendChild(document.createTextNode(rs.fields("DC")));
        DC.style.border = "1px solid black";
        var Stjerne = tr.insertCell();
        Stjerne.appendChild(document.createTextNode(rs.fields("Star")));
        Stjerne.style.border = "1px solid black";
        var Kommentar = tr.insertCell();
        Kommentar.appendChild(document.createTextNode(rs.fields("Comment")));
        Kommentar.style.border = "1px solid black";
        rs.MoveNext();
    }
    rs.close();
    connection.close();
    body.appendChild(tbl);
}
</script>
</body>
</html>

score 1 · Accepted Answer · edited May 23 '17 at 11:57

As an interpreted language, Javascript is slower and Access db is too. To get an accurate picture, you should time the individual processes of your application: how long it takes to read the database (creating it and looping over it the recordset) withtout creating the HTML elements; how long it takes to create the tbl element without inserting; how long it takes to insert it into the body document, etc.

However, Without testing it, I won't be surprised to learn that the building of the tbl element and its insertion are the two slowest processes; so instead of build it using dynamic nodes; you should instead build your new HTML as a plain text and use an assignation innerText to insert it. This will cause some problems outside of IE, so see 'innerText' works in IE, but not in Firefox for more information on this topic.

Apparently, it takes a second, if I use document.write instead. I'll look into innerText instead. Thanks. — MNor, Nov 11 '14 at 09:44

Constructing HTML table in JavaScript, from Acces DB via ADODB

1 Answers1