gh-5 Improved JS render performance

Dramatically improved web table render time by using dom
manipulation instead of string concatenation for generating the
data table
This commit is contained in:
Jarno Rankinen 2023-02-02 13:10:30 +02:00
parent 5d23e34f44
commit c29692ae3e
1 changed files with 12 additions and 8 deletions

View File

@ -26,16 +26,20 @@ function coils(data) {
function registers(data) { function registers(data) {
console.log(`${timeStamp()} Filling register data...`) console.log(`${timeStamp()} Filling register data...`)
document.getElementById('datatable').innerHTML = ""; datable = document.getElementById('datatable').innerHTML
for (n=0; n<data.length; n++) { for (n=0; n<data.length; n++) {
tablerow = `<tr><td class="addr" id="addr_${data[n].address}">${data[n].address}</td>\ tablerow = document.createElement("tr")
<td class ="val" id="value_${data[n].address}">${data[n].value}</td>\ fields = ["address", "value", "symbol", "description"]
<td class="symbol" id="symbol_${data[n].address}">${data[n].symbol}</td>\
<td class="desc" id="description_${data[n].address}">${data[n].description}</td></tr>` for (i=0; i<fields.length; i++) {
document.getElementById('datatable').innerHTML += tablerow td = document.createElement("td")
if (data[n].type == "bitfield") { value = document.createTextNode(data[n][fields[i]])
document.getElementById(`value_${data[n].address}`).innerHTML = data[n].bitfield td.appendChild(value)
tablerow.appendChild(td)
} }
datatable.appendChild(tablerow)
} }
console.log(`${timeStamp()} Done.`) console.log(`${timeStamp()} Done.`)
} }