Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    12

    Lentezza esagerata su Inetrnet Explorer usando il DOM

    Ciao a tutti

    Premetto che non sono un'esperto di DOM.

    Immaginate la situazione di avere speso 2 mesi di tempo per creare un'applicazione per poi accorgermi che le istruzioni DOM eseguite da Internet Explorer sono circa 10 volte più lente rispetto a Firefox (10 secondi contro 1,5 cronometrati).
    E' il mio caso.

    Vorrei un'aiuto per cercare di risolvere il problema senza stravolgere il codice e la logica dell'applicazione.

    Il problema in parole povere è questo:
    da una select, alla onchange eseguo una funzione javascript che utilizza istruzioni DOM.
    Purtroppo la onchange è abbastanza frequente e percio l'utente stà in attesa 10 secondi ogni volta che cambia un valore.

    La funzione Javascript si chiama: DOSELMACH ed esegue alla fine la funzione RICALCOLA.
    Richiamata dalla onchange dalla select: SELMACH


    Allego il codice.
    Tenete presente che le righe nella tabella a video sono 52.
    Ne allego solo alcune per esempio.

    GRAZIE A TUTTI IN ANTICIPO.

    PS:
    non riesco ad allegare il documento completo html che ho su disco.



    <html>
    <head>
    <title>Piano di produzione Assemblaggio. Programma WMAG46</title>

    <link href="/cgiexe/css/as400.css" rel="stylesheet" type="text/css">

    <style TYPE="text/css">
    thead {display: table-header-group;}
    tfoot {display: table-footer-group;}
    </style>


    <style media="print">
    .noprint { display: none }
    </style>




    <script language="Javascript" src="/cgiexe/jscripts/scw.js" type="text/javascript">
    </script>
    <script language="Javascript" src="/cgiexe/jscripts/handleEnter.js" type="text/javascript">
    </script>

    <script language=javascript>

    //================================================== =================
    // E' variata la Macchina nella select della testata e di conseguenza:
    // - rileggo tutte le righe del subfile
    // - su tutte le righe della vecchia macchina forzo readonly su tutti i campi di I/O
    // - su tutte le righe della vecchia macchina forzo il colore di backgr. verde
    //================================================== =================
    function doselmach() {

    document.form1.totpezzimach.value=0
    document.form1.oreocc.value=0
    document.form1.orelibere.value=document.form1.ored ispon.value

    //trovo la produttivitÓ della Macchina dalla opzione selezionata della Select delle macchine
    //e aggiorno il campo pezzi turno effettivi
    var x=document.getElementById("IdSelMach")
    var text=x.options[x.selectedIndex].text
    var pos=text.indexOf("Pz/Turno:")

    if (pos==-1) {
    document.form1.pezzieff.value=0
    } else {
    var pezzieff=text.substring(pos+9)
    document.form1.pezzieff.value=text.substring(pos+9 )
    }

    //mi posiziono sul campo della data inizio macchina, in modo che l'utonto non possa scorrere per sbaglio
    //la select delle Macchine che genera lentezza con IE
    document.form1.datainimach.focus()
    //document.form1.datainimach.select()

    for (k=0; k<1000; k++) {
    if (document.form1.sel[k]==undefined) {return false}
    if ((document.form1.selmach.value!=document.form1.mac h[k].value) && (document.form1.mach[k].value!="")) {
    document.getElementById("pezzi"+k).readOnly=true
    document.getElementById("seq"+k).readOnly=true
    document.getElementById('seq'+k).style.background= "#00FF7F" //verde
    document.getElementById("prta"+k).readOnly=true
    document.getElementById("comme"+k).readOnly=true
    document.getElementById('macch'+k).style.backgroun d="#00FF7F" //verde
    document.getElementById('macch'+k).style.font="bol d 12px arial,serif"
    document.getElementById('macch'+k).style.border="0 none #ffffff"
    }
    if ((document.form1.selmach.value==document.form1.mac h[k].value) && (document.form1.mach[k].value!="")) {
    document.getElementById("pezzi"+k).readOnly=false
    document.getElementById("seq"+k).readOnly=false
    document.getElementById('seq'+k).style.background= "#faf890" //giallo
    document.getElementById("prta"+k).readOnly=false
    document.getElementById('macch'+k).style.backgroun d="#FFE303" //giallo
    document.getElementById('macch'+k).style.font="bol d 12px arial,serif"
    document.getElementById('macch'+k).style.border="0 none #ffffff"
    document.getElementById("comme"+k).readOnly=false
    }
    //ricalcolo tutto dopo avere cambiato la Macchina
    Ricalcola()
    }
    }


    //================================================== =================
    // Questa funzione viene richiamata:
    // alla ONCHANGE del campo PEZZI del subfile ad ogni riga del subfile
    // alla ONBLUR del campo Pezzi turno effettivi
    //
    // Lo scopo Þ quello di aggiornare al volo tutti i campi di totale a video dopo una modifica.
    //================================================== =================
    function Ricalcola() {

    //-----------------------------------------------------------------------------------------
    // Ricalcolo e Aggiorno i GG di differenza tra la data inizio della Macchina scelta e la
    // data fine inserita in testata
    //-----------------------------------------------------------------------------------------
    // creo l'array della data inizio Macchina con 3 elementi: anno/mese/giorno
    var entry1 = document.form1.datainimach.value.split('/');//splits input value;
    y1=entry1[2]*1
    m1=entry1[1]*1-1;//sets months to default values i.e Jan = 0; Feb = 1; etc.
    d1=entry1[0]*1

    // creo l'array della data finale di programmazione con 3 elementi: anno/mese/giorno
    var entry2 = document.form1.datafinprog.value.split('/');//splits input value;
    y2=entry2[2]*1
    m2=entry2[1]*1-1;//sets months to default values i.e Jan = 0; Feb = 1; etc.
    d2=entry2[0]*1
    //creo i campi data
    var data1 = new Date(y1,m1,d1);
    var data2 = new Date(y2,m2,d2);//sets the new date

    if (data1>data2) {
    alert("La Data iniziale di Programmazione e' maggiore della Data finale")
    document.form1.datainimach.focus()
    document.form1.datainimach.select()
    return
    }

    //calcolo la differenza in millisecondi tra data finale (piu' alta) e iniziale (piu' bassa)
    dif = data2-data1
    // Math.ceil() - arrotonda un numero (per eccesso) all'intero successivo (es: 0.5 = 1)
    dif = Math.ceil(dif/1000/60/60/24) //differenza in giorni

    //----------------------------------------------------
    // Ricalcolo e Aggiorno le ore Macchina disponibili
    //----------------------------------------------------
    document.form1.oredispon.value=dif*24

    //------------------------------------------------------
    // Ricalcolo e Aggiorno:
    // 1) il N‹ totale pezzi inseriti dall'utente
    // 2) il N‹ totale pezzi riferito alla macchina scelta
    // 2) le ore macchina occupate
    // 3) le ore macchina libere
    //------------------------------------------------------
    var totpezziass=0
    var totpezzimach=0
    var oreocc=0

    //Calcolo:
    //Il totale pezzi (TOTPEZZIASS) e il totale Pezzi relativo alla Macchina scelta (TOTPEZZIMACH)
    //In realtÓ qui i totali li faccio sempre, anche se la checkbox non Þ segnata, altrimenti
    //se l'utente togliesse la spunta, non farei il ricalcolo corretto.

    //I totali sono 2 perchÞ:
    //TOTPEZZIASS Þ il totale generale in fondo
    //TOTPEZZIMACH Þ il totale pezzi assegnato alla macchina scelta, per fare il conteggio delle ore Occupate/Libere
    if (document.form1.nbrrecs.value>1) {
    for (m=0; m<1000; m++) {
    if (document.form1.sel[m]==undefined) {break}
    var totpezziass=totpezziass+document.form1.pezzi[m].value*1
    if ((document.form1.selmach.value!="")) {
    if (document.form1.selmach.value==document.form1.mach[m].value) {
    totpezzimach=totpezzimach+document.form1.pezzi[m].value*1
    }
    }
    }
    }

    if (document.form1.nbrrecs.value==1) {
    if ((document.form1.selmach.value!="")) {
    var totpezziass=totpezziass+document.form1.pezzi.value *1
    totpezzimach=totpezzimach+document.form1.pezzi.val ue*1
    }
    }

    //aggiorno il Tot.Pezzi, ore macchina occupate e ore macchina libere
    document.form1.totpezzimach.value=totpezzimach
    document.form1.totpezziass.value=totpezziass
    if ((document.form1.pezzieff.value!="0") && (document.form1.pezzieff.value!="")) {
    document.form1.oreocc.value=Math.round((totpezzima ch/document.form1.pezzieff.value*1)*8)
    document.form1.orelibere.value=document.form1.ored ispon.value*1-document.form1.oreocc.value*1
    //se le ore libere solo <0 lo sfondo diventa rosso. Diversamente Þ giallo.
    if (document.form1.orelibere.value<0) {
    document.getElementById('orelibere').style.backgro und="#FF030D" //rosso
    document.getElementById('orelibere').style.font="b old 12px arial,serif"
    document.getElementById('orelibere').style.border= "2 solid black"
    } else {
    document.getElementById('orelibere').style.backgro und="#FFE303" //giallo
    document.getElementById('orelibere').style.font="b old 12px arial,serif"
    document.getElementById('orelibere').style.border= "2 solid black"
    }
    }

    //fine function
    }


    </script>

    </head>

    Macchina
    <select class=iform name=selmach size=1 onChange=doselmach() id="IdSelMach" onkeypress="return handleEnter(this, event)">
    <option value="">
    </option>
    <option value="M327">M327ASS.TS1 4ª PARTE GEFIT VEL (1)Pz/Turno:23000
    </option>
    <option value="M328">M328ASS.TS1 4ª PARTE GEFIT VEL (2)Pz/Turno:23000
    </option>
    <option value="M330">M330ASS.TS1 4ª PARTE BETT. TERMOLIPz/Turno:35000
    </option>
    <option value="M346">M346ASS.4 PARTE TRPz/Turno:10000
    </option>
    </select>

    <table cellpadding=2 cellspacing=0 border=5>
    <thead>
    <tr>
    <td class=small9px valign=top>Cliente</td>
    <td class=small9px valign=top>Vincolo</td>
    <td class=small9px valign=top>Ordine</td>
    <td class=small9px valign=top>St</td>
    <td class=small9px valign=top>Set</td>
    <td class=small9px valign=top>Data Sped</td>
    <td class=small9px valign=top>Codice articolo</td>
    <td class=small9px valign=top>in Ordine</td>
    <td class=small9px valign=top>da Produrre</td>
    <td class=small9px valign=top>Macchina</td>
    <td class=small9px valign=top>Seq</td>
    <td class=small9px valign=top>Pezzi</td>
    <td class=small9px valign=top>Pta'</td>
    <td class=small9px valign=top>Bolla Nicim</td>
    <td class=small9px valign=top>Sel</td>
    <td class=small9px valign=top>Commento per i capiturno</td>
    </tr>
    </thead>

    <tr>
    <td class=small9px align=left nowrap>190770BARTOLINE LIMITED-GB</td>
    <td class=small9px align=left nowrap>CRC-CERE-ON/OFF-DOWLEX</td>
    <td class=small9px align=left nowrap>115978/1</td>
    <td class=small9px align=left nowrap>Firm</td>
    <td class=small9px align=left nowrap><font color=black>35</font></td>
    <td class=small9px align=left nowrap>VEN 31/08/2007*</td>
    <td class=small9px align=left nowrap>80A-RB0B0-1705</td>
    <td class=small9px align=right nowrap>36.000</td>
    <td class=small9px align=right nowrap><font color=red>9.000</td>
    <input type=hidden name=pezzidapro value=9000>
    <td class=small9px><input type=text name=mach size=4 maxlength=4 readonly id='macch0' class=readonlybianco11px value=M330></td>
    <td class=small9px><input type=text name=seq size=3 maxlength=3 id='seq0' onBlur=checkdupseq("1") tabindex="1" value=1></td>
    <td class=small9px><input type=text name=pezzi size=6 maxlength=6 id='pezzi0' onChange=Ricalcola() tabindex="2" value=9000></td>
    <td class=small9px><input type=text name=prta size=1 maxlength=1 id='prta0' tabindex="3" value=1></td>
    <td class=small9px><input type=text name=rifni size=7 maxlength=6 readonly class="readonly" tabindex="4" value=></td>
    <td class=small9px><input type=checkbox name=sel onClick=dosel("1") value="1" checked></td>
    <td class=small9px><input type=text name=comme size=40 maxlength=40 id='comme0' class=iform11white
    tabindex="5" value=""></td>
    <input type=hidden name=spprog value=66258>
    <input type=hidden name=nriga value=1>

    <input type=hidden name=mach_nicim value="">
    <input type=hidden name=seq_nicim value="">
    <input type=hidden name=pezzi_nicim value="">
    <input type=hidden name=prta_nicim value="">
    <input type=hidden name=rif_nicim value="">
    </tr>
    </table>

    </form>

  2. #2
    troppi onfocus ... nessun caching delle variabili (o elementi del dom) ed in fine questo:

    onChange=doselmach()

    praticamente non t'ha mai funzionato l'onchange quindi non capisco come tu abbia potuto rilevare tali differenze...

    gli eventi, che ricordo si scrivono in minuscolo poichè in (x)HTML è tutto minuscolo (HTML invece maiuscolo) ... (p.s. e bisogna che il tizio di wikipedia sistema quella pagina...) si assegnano all'interno di apici doppi o singoli poichè in quel modo altro non fai che chiamare una sola volta la funzione ... e siccome la stessa non ritorna se stessa non accadrà altro.

    onchange="doselmach(this)"

    il this è se vuoi passare quella select invece di ricercarla ogni volta tramite le funzioni dom ... ce l'hai, è il this dell'onchange ... perchè non sfruttarlo ?
    Formaldehyde a new Ajax PHP Zero Config Error Debugger

    WebReflection @WebReflection

  3. #3
    Utente di HTML.it
    Registrato dal
    Jul 2007
    Messaggi
    12
    Originariamente inviato da andr3a
    troppi onfocus ... nessun caching delle variabili (o elementi del dom) ed in fine questo:

    onChange=doselmach()

    praticamente non t'ha mai funzionato l'onchange quindi non capisco come tu abbia potuto rilevare tali differenze...

    gli eventi, che ricordo si scrivono in minuscolo poichè in (x)HTML è tutto minuscolo (HTML invece maiuscolo) ... (p.s. e bisogna che il tizio di wikipedia sistema quella pagina...) si assegnano all'interno di apici doppi o singoli poichè in quel modo altro non fai che chiamare una sola volta la funzione ... e siccome la stessa non ritorna se stessa non accadrà altro.

    onchange="doselmach(this)"

    il this è se vuoi passare quella select invece di ricercarla ogni volta tramite le funzioni dom ... ce l'hai, è il this dell'onchange ... perchè non sfruttarlo ?

    ------------------------------------------------
    Enrico

    La onchange funziona eccome, te lo assicuro.

    Caching delle variabili (o elementi del dom) ???
    Scusa l'ignoranza ma cosa significa ?

    La domanda però più interessante sarebbe però:
    come mai Firefox ci mette 1 secondo ?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.