[Javascript] For-loop su thead: tempo di esecuzione variabile

[nixiam]

Ciao a tutti,
vi scrivo dopo aver passato 2 giorni per tentare di risolvere il problema

Sto cercando di sviluppare una tabella html con thead statico allo scroll.
Per farlo ho creato 2 DIV dove sul primo eseguo un clone del thead della tabella sottostante e poi tramite un loop "ricopio" la larghezza di ogni td dal thead originale.

Sto cercando di ottimizzare al massimo i tempi di risposta ed ho notato che il tempo necessario al loop varia a seconda del numero di righe della tabella.
Con meno di 100 righe il loop con 9 colonne avviene in circa 9ms ma con 15000 righe ci vogliono circa 300/350 ms. Il fatto è che il numero di colonne da iterare è sempre lo stesso ed il codice JS punta sempre al thead della tabella originale, mai al tbody...
Perché la lunghezza della tabella impatta? Con 15000 righe ogni iterazione del loop impiega circa 30/35 ms.

Di seguito il codice JS

            var originTbl = document.querySelector("div.origin table.mytable");
            var originTbl_Head = originTbl.querySelector("thead");
            var cloneTbl = document.querySelector("div.cloned table.mytable");
            var clone = originTbl_Head.cloneNode(true);
            cloneTbl.appendChild(clone);
            originTbl_Head.style.visibility = 'hidden';

            var tds = cloneTbl.querySelectorAll('thead tr:first-child td');
            var originTbl_Tbody_Tr = originTbl.querySelectorAll("tbody tr");
            var td_list = originTbl_Tbody_Tr[0].querySelectorAll('td');

            console.time("loop");
            for(i = 0; i < tds.length; i++) {
                var td = td_list[i];
                var width = td.clientWidth;
                tds[i].style.width = width + 'px';
            }
            console.timeEnd('loop');

 

[marino51]

racchiudi le varie istruzioni in un contatore e vedi quale richiede il maggior tempo, soprattutto in funzione del numero di righe,
io ho risolto lo stesso problema in altro modo, spendendo un tempo ridottissimo, indipendentemente dalle righe della tabella
ti posto la mia soluzione, molto semplice, i 3 "for" sono voluti e necessari, come lo sono le array

#myTable thead
{
    display:table-row;
}

#myTable tbody
{
    display:block;
    overflow-x:hidden;
}

$(document).ready(function()
{
    function getInnerWidth(elem) { return parseFloat(window.getComputedStyle(elem).width); }

//  console.time('tempoEsecuzione');

    var table = document.getElementById('myTable'),
        r0    = table.rows[0],
        r1    = table.rows[1],
        nCol  = r1.cells.length;

    var th=[], thWidth=[], td=[], tdWidth=[], txWidth;

    for(i=0; i<nCol; i++) { th[i] = r0.cells[i]; thWidth[i] = getInnerWidth(th[i]); }

    for(i=0; i<nCol; i++) { td[i] = r1.cells[i]; tdWidth[i] = getInnerWidth(td[i]); }

    for(i=0; i<nCol; i++) {
        if (thWidth[i] > tdWidth[i]) txWidth = thWidth[i]+'px';
        else                         txWidth = tdWidth[i]+'px';

        th[i].style.width = txWidth;
        td[i].style.width = txWidth;
    }

//  console.timeEnd('tempoEsecuzione');

    $("#myTable").tablesorter();
});

come pegno devo applicare il cambio di stile sia sulla riga "thead" che sulla prima "tbody" pena il mancato allineamento ma il tempo resta inferiore ai 10 ms

eliminando le array e con 1 unico "for" il tempo di esecuzione schizza ad oltre 2 secondi (sulla mia povera macchina)