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

nixiam

Nuovo Utente
14 Ago 2017
11
0
1
33
Ciao a tutti,
vi scrivo dopo aver passato 2 giorni per tentare di risolvere il problema :D

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

Codice:
            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

Utente Attivo
28 Feb 2013
3.001
173
63
Lombardia
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
HTML:
#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)
 
Ultima modifica:
Discussioni simili
Autore Titolo Forum Risposte Data
C Loop Javascript console browser Javascript 1
G Passare loop in php su uno script javascript PHP 12
F Creare elementi html con javascript Javascript 0
A pulsante di update campo mysql con javascript Javascript 2
8 Javascript - PDF Form Javascript 0
B javascript per problemi con pdf e Safari Javascript 0
N informazione javascript Programmazione 0
I Eecuzione di javascript in ciclo foreach php. PHP 7
P javascript:document.forms Javascript 7
S Consiglio esercizio Javascript Javascript 2
MarcoGrazia Aggiungere o rimuovere classi in javascript Javascript 1
P Passaggio id php a javascript PHP 6
E lettura da un Database con Javascript jQuery 2
V TRIS in javascript Javascript 1
IClaude Funzione Javascript Javascript 8
Alex_70 Javascript date color Javascript 3
F Convertire JavaScript per la compatibilità nei browser obsoleti Javascript 0
I Passare dei parametri in javascript PHP 0
Shyson Meglio Javascript o HTML? Javascript 4
M Chiamare pagina php da javascript Javascript 8
M Errore JavaScript per php [objeto HTMLParagraphElement] PHP 0
D Javascript per il download dei dati Javascript 0
grgfede Problema javascript con aruba Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
W Modificare il Type di un Input box in javascript ovunque si trovi Javascript 0
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
L [Javascript] Problema salvataggio dati in db Javascript 1
max1974 [Javascript] Grafico chartjs con dati da J.ajax Javascript 3
G Quiz Javascript Javascript 4
A [Javascript] Scrittura su più campi contemporaneamente Javascript 19
F classic asp popolare combo box javascript Presentati al Forum 1
claudio_lorenzo [Javascript] aiuto su jquery per calcolo altezze dom Javascript 1
F [Javascript] comando innerHTML non funziona Javascript 5
alexice51 proggrammi per scrivere in javascript? Javascript 3
max1974 [Javascript] Accordion aria-exspanded Javascript 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
O [Javascript] Conflitto Jquery: forse... Javascript 0
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
G [Javascript] Errore inserimento dati Backend Node.js e workbench Javascript 1
A Creare con Javascript un percorso all'interno di uno spazio Javascript 0
D [Javascript] inserire uno script in un file php Javascript 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
K [javascript] Tecnica per rilevare celle contenenti caratteri ricevute in dinamico Javascript 1
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
S [Javascript] Problema costrutto if Javascript 0
I [Javascript] window.location.href porta alla nuova pagina e ritorna incomprensibilmente. Javascript 0
L [Javascript] input variabili di scrittura con canvas Javascript 2
G [Javascript] Passare un valore via querystring Javascript 1
max1974 [Javascript] Funzione Errata procedura Javascript 2

Discussioni simili