Utilizzo anomalo CPU

di il
8 risposte

Utilizzo anomalo CPU

Buona sera

Sto sviluppando un'applicazione con React frontend e NodeJs per il backend .

L'app è molto semplice : un menu a tendina con 4 link i primi tre aprono una pagina con solo la scritta ‘Hello World’ il quarto apre una pagina

con un form e una decina campi input text , 1 input data e un tasto submit  . Su un campo input vi è una richiesta get tramite axios a Mysql  ,sul tasto submit una richiesta post e poco altro.

Aprendo Gestione attivita di Windows succede questo : stando nelle prime 3 pagine ho un consumo di CPU dello 0,1% , appena entro nella pagina del form l'utilizzo della cpu schizza 38% ,rimanendo stabile, e dopo pochi secondi partono le ventole di raffreddamento ,ritornando in una delle 3 prime pagine l'utilizzo della cpu ritorna normale . Ho un notebbok da gaming con intel i7 10gen e questo comportamento a me sembra anormale per un app del genere al contrario se fosse un videogame.

Grazie a tutti

8 Risposte

  • Re: Utilizzo anomalo CPU

    08/08/2023 - paololetto ha scritto:


    Aprendo Gestione attivita di Windows succede questo : stando nelle prime 3 pagine ho un consumo di CPU dello 0,1% , appena entro nella pagina del form l'utilizzo della cpu schizza 38% ,rimanendo stabile, e dopo pochi secondi partono le ventole di raffreddamento ,ritornando in una delle 3 prime pagine l'utilizzo della cpu ritorna normale . Ho un notebbok da gaming con intel i7 10gen e questo comportamento a me sembra anormale per un app del genere al contrario se fosse un videogame.

    Ma qual è il processo che effettivamente sta consumando la CPU?

    In secondo luogo, non vedendo codice di alcun tipo, non c'è modo di capire se hai commesso un errore nella scrittura del programma che causa questa problematica.

  • Re: Utilizzo anomalo CPU

    La ringrazio per la risposta .

    Il processo che consuma CPU è esclusivamente Firefox. Le invio il listato che ha 3 piccoli form .

    Scusi per sicuri strafalcioni ma è da non molto che mi sono avvicinato a javascript &Co ho sempre programmato in delphi e poi in VB.

    Mi sono bloccato nello sviluppo perchè é improponibile .

    Grazie

    import React,{useState,Fragment} from 'react';
    import { ToastContainer, toast } from 'react-toastify';
    import axios from "axios";
    import 'react-toastify/dist/ReactToastify.css';
    import dayjs from 'dayjs';
    import './../index.css'
    
    import { Uinput } from './Uinput';
    import { Uselect } from './Uselect';
    
    import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
    import { DateField } from '@mui/x-date-pickers/DateField';
    import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
    import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
    import { firstFunction } from './BarrePrinc';
    function NewImp() {
      
     const boxMedici=[];
     const [valore, setValore] = useState();
      const[data,setData]=useState([])
      const formArray = [1, 2, 3];
      const [formNo, setFormNo] = useState(formArray[0])
      const [error,setError] = useState(false)
      const [state, setState] = useState({
        cogn: '',
        nom: '',
        dta:'',
        batch: '',
        citta:'',
        strada:'',
        varsity:'',
        session: '',
        address: '',
        district: '',
        thana: '',
        post: '',
        dottore: ''
        
       // notificationType: [],
        //notificationPush: '1'
       
      })
      const loadData = async()=>{
        try {
          const response= await axios.get("http://localhost:8800/prove")
        setData(response.data )
     
        } catch (error) {
          console.log(error)
        }
      }
      const inputHandle = (e) => {
        setState({
          ...state,
          [e.target.name]: e.target.value   
        })
        
      }
      const pre = () => {
        setFormNo(formNo - 1)
      }
      const next = () => {
        if (formNo === 1 && state.cogn && state.nom && state.batch && state.dottore && (state.dottore!=='Scegli un medico....')) {
          setFormNo(formNo + 1)
        }
        else if (formNo === 2 && state.varsity && state.session && state.address) {
          setFormNo(formNo + 1)
        } else {
          toast.error('Please fillup all input field')
        }
      }
      const finalSubmit = async(e) => {
        if (state.district && state.thana && state.post) {
          e.preventDefault();
          try {
           
            await axios.post("http://localhost:8800/NewImp", state);
           
             toast.success('form submit success')
             console.log("array"+ state);
          } catch (err) {
            setError(true)
          }
        } else {toast.error('Please fillup all input field')}
      }
        
         loadData() //richiesta elenco medici per il combobox
         data.forEach(item=>boxMedici.push(item.medico));
         boxMedici.unshift('Scegli un medico....')
        
         const handleKeyDown =(e) => {
          if(e.keyCode === 13) {    
              var ritorno=firstFunction(state.cogn);
            // alert(ritorno);      
        }
      }
         
      return (
        
        <div className="w-screen h-screen bg-slate-300 flex justify-center items-center">
          <ToastContainer theme='light'/>
        <div className="card w-[1300px] card h-[700px] rounded-md shadow-md bg-white p-5">
        <div className='flex justify-center items-center'>
        {
                formArray.map((v, i) => <> <div key={i} className={`w-[35px] my-3 text-white rounded-full ${formNo - 1 === i ||formNo-1===i+1 ||formNo===formArray.length ? 'bg-blue-700' : 'bg-slate-400'} h-[35px] flex justify-center items-center`}>
                  {v}
                </div>
                {
                i !== formArray.length - 1 && <div className={`w-[85px] h-[3px] ${formNo === i + 2 || formNo === formArray.length ? 'bg-blue-500' : 'bg-slate-400'}`}></div>
                }          
                </>)
                
              }
      </div>
      {  
        formNo===1 && <div > 
          <div className='grid gap-6 mb-6 md:grid-cols-3'>    
     
        <input type="text" value={state.cogn} className='bg-gray-150 border border-gray-700 text-gray-900 text-sm rounded-lg '
          placeholder='name' onChange={(e)=>{const val=e.target.value ; setState({...state,cogn:val})} } onKeyDown={(e) => handleKeyDown(e)}/>
         <Uinput label="Nome" id="nombre"  value={state.nom}   onChange={(e)=>{const val=e.target.value ; setState({...state,nom:val})}   }  />  
       
          
          <div >
                  <label htmlFor="batch" className='block mb-2 text-sm font-medium text-gray-900 dark:text-white'>Batch</label>
                  <input value={state.batch} onChange={inputHandle} className='bg-gray-50 border border-gray-300 ' type="number" name='batch' placeholder='batch' />
          </div>
         </div> 
      
          <div  className='grid gap-6 mb-6 md:grid-cols-4'>  
                <Uinput label="Residenza" id="ciudad"  value={state.citta} onChange={(e)=>{const val=e.target.value ; setState({...state,citta:val})}   }  />  
                <Uinput label="Via" id="calle"  value={state.strada} onChange={(e)=>{const val=e.target.value ; setState({...state,strada:val})}   }  />  
                <Uselect label="Medico" id="dotor" values={boxMedici} valoreReale={valDefault} onChange={(e)=>{const val=e.target.value ; setState({...state,dottore:val})}   }/> 
         </div>
        
           <div>
           <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DemoContainer components={['DateField']}>
          <DateField
              defaultValue={dayjs()}
              format="DD-MM-YYYY"
              label="Controlled field"
              value={valore}
              onChange={ (newValue) => setState({...state,dta: dayjs(newValue).format('YYYY-MM-DD')}) }
            />
          </DemoContainer>
        </LocalizationProvider>
          
          
            </div>
          <div>
          
          </div>  
              
          <div className='grid gap-6 mb-6 md:grid-cols-1'>
             <button type="button" onClick={next} className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Prossimo</button> 
          </div>
         
         
        </div>   
        }
    
    
        {
              formNo === 2 && <div className='grid gap-6 mb-6 md:grid-cols-3'>
                <div className='flex flex-col mb-2'>
                  <label className='text-slate-500' htmlFor="varsity">Varsity</label>
                  <input value={state.varsity} onChange={inputHandle} className='p-2 border border-slate-400 ' type="text" name='varsity' placeholder='varsity name' id='varsity' />
                </div>
                <div className='flex flex-col mb-2'>
                  <label className='text-slate-500' htmlFor="session">session</label>
                  <input  value={state.session} onChange={inputHandle} className='p-2 border border-slate-400 ' type="text" name='session' placeholder='session' id='session' />
                </div>
                <div className='flex flex-col mb-2'>
                  <label className='text-slate-500' htmlFor="address">Address</label>
                  <textarea value={state.address} onChange={inputHandle} row='10' className='p-2 border border-slate-400 ' type="number" name='address' placeholder='address' ></textarea>
                </div>
                <div className='mt-4 gap-3 flex justify-center items-center'>
                  <button onClick={pre}className='px-3 py-2 text-lg rounded-md w-full text-white bg-blue-500'>Previous</button>
                  <button onClick={next} className='px-3 py-2 text-lg rounded-md w-full text-white bg-blue-500'>Next</button>
                </div>
              </div>
            }
    
            {
              formNo === 3 && <div className='grid gap-6 mb-6 md:grid-cols-3'>
                <div className='flex flex-col mb-2'>
                  <label htmlFor="district">District</label>
                  <input value={state.district} onChange={inputHandle} className='p-2 border border-slate-400 ' type="text" name='district' placeholder='district name' id='district' />
                </div>
                <div className='flex flex-col mb-2'>
                  <label htmlFor="thana">Thana</label>
                  <input value={state.thana} onChange={inputHandle} className='p-2 border border-slate-400 ' type="text" name='thana' placeholder='thana' id='thana' />
                </div>
                <div className='flex flex-col mb-2'>
                  <label htmlFor="post">Post</label>
                  <input value={state.post} onChange={inputHandle} className='p-2 border border-slate-400 ' type="text" name='post' placeholder='post' id='post' />
                </div>
                <div className='mt-4 gap-3 flex justify-center items-center'>
                  <button onClick={pre} className='px-3 py-2 text-lg rounded-md w-full text-white bg-blue-500'>Previous</button>
                  <button  onClick={finalSubmit} className='px-3 py-2 text-lg rounded-md w-full text-white bg-blue-500'>Submit</button>
                  
                </div>
              </div>
            }
      </div>
      </div>
    
    );
    }
    export default NewImp;
  • Re: Utilizzo anomalo CPU

    09/08/2023 - paololetto ha scritto:


    La ringrazio per la risposta .

    Dammi pure del “tu”. :)

    09/08/2023 - paololetto ha scritto:


    Scusi per sicuri strafalcioni ma è da non molto che mi sono avvicinato a javascript &Co ho sempre programmato in delphi e poi in VB.

    Parli con un Delphista di lunghissima data. :D

    09/08/2023 - paololetto ha scritto:


    Le invio il listato che ha 3 piccoli form .

    Nel codice ci sono molti elementi ed è un po' intricato: difficile individuare una causa specifica.

    Io suggerirei di ripartire reintroducendo un elemento alla volta per verificare qual è l'elemento che da il via alla problematica. :|

  • Re: Utilizzo anomalo CPU

    Grazie faro' nel modo da lei suggerito

  • Re: Utilizzo anomalo CPU

    Ho trovato il problema che in questa questa funzione e nella relativa chiamata.

    Il problema si risolve,anche solo, eleminando la chiamata alla funzione -loadData()-  Non capisco il motivo di questo fenomeno è come se entrasse in un loop continuo e di conseguenza un utilizzo enorme della CPU. Grazie

    const loadData = async()=>{
        try {
          const response= await axios.get("http://localhost:8800/prove")
        setData(response.data )
     
        } catch (error) {
          console.log(error)
        }
      } 	
      
     loadData()  	

    Node.js

    app.get("/prove",(req,res)=>{   
        const q="select * from pmmedico"
        db.query(q,(err,result)=>{
            if(err) return res.json(err)
            res.json(result)
        })
    })
  • Re: Utilizzo anomalo CPU

    10/08/2023 - paololetto ha scritto:


    Il problema si risolve,anche solo, eleminando la chiamata alla funzione -loadData()-  Non capisco il motivo di questo fenomeno è come se entrasse in un loop continuo e di conseguenza un utilizzo enorme della CPU. Grazie

    Direi che è esattamente quello che succede: un ciclo infinito.

    Quando chiami loadData(), parte la chiamata asincrona per recuperare i dati. Non appena ricevi la risposta, chiami setData() per passarli allo stato di React, il quale - giustamente - effettua di nuovo il rendering del componente in modo da visualizzarli nella pagina, solo che la tua logica contiene due errori, il primo determinante per la problematica, il secondo meno impattante ma comunque presente.

    Il primo errore è che nel rendering esegui di nuovo la chiamata per recuperare i dati:

         loadData() //richiesta elenco medici per il combobox
         data.forEach(item=>boxMedici.push(item.medico));

    quindi di fatto stai di nuovo effettuando un'altra richiesta, che imposterà i dati ricevuti nello stato, che scatenerà un nuovo rendering, che aggiornerà ancora la richiesta, e così via… da cui il problema del loop infinito.

    In secondo luogo, il codice sopra è sbagliato perché loadData() è una funzione asincrona: se la invochi e poi accedi subito ai dati - con data.forEach(…) - non troverai le informazioni che ti aspetti, perché la chiamata alla funzione di caricamento non attende di avere i dati prima di proseguire: questi arriveranno in un secondo momento e chiameranno il codice che segue la parola chiave await, ma intanto tu hai già eseguito il codice del ciclo.

    A dimostrazione, se provi a mettere un console.log() prima e dopo loadData() e anche dopo data.forEach(), scoprirai che vengono tutti eseguiti prima che la richiesta venga completata e i dati arrivino al componente.

    Devi quindi mettere un then() dopo loadData(), se vuoi sfruttare i metodi delle Promise(), oppure la parola chiave await.

    Per inizializzare il componente una volta sola con React, direi che devi farlo all'interno dell'hook useEffect().

    Ciao! :)

  • Re: Utilizzo anomalo CPU

    Ho risolto con :

    useEffect(() => {
        loadData();
    //     console.log('5')
      }, []);

    “non troverai le informazioni che ti aspetti” , ma quando posso essere sicuro che i dati scaricati dal server mysql sono completi edi conseguenza eseguire una elaborazione su di essi?

    Inserendo varie console.log ho visto che l'esecuzione del listato che inizia da const boxMedici=[] salta useffect giunge fino alla fine delle istruzioni contenute in  {form===1 …} ritorna direttamente ad useffect , esegue la funzione loadata() e riparte dall'inizio -const boxMedici=[]- fino alla fine del {Form===1 … } saltando nuovamente useffect .A me sembra un comportamento strano ,è vero che useffect deve essere eseguito una sola volta, ma perchè non eseguirlo alla prima discesa ? Perdona la mia poca conoscenza , ma non ho mai avuto a che fare con il rendering.

    Grazie sei gentilissimo

  • Re: Utilizzo anomalo CPU

    11/08/2023 - paololetto ha scritto:


    “non troverai le informazioni che ti aspetti” , ma quando posso essere sicuro che i dati scaricati dal server mysql sono completi edi conseguenza eseguire una elaborazione su di essi?

    Il problema non è la “sicurezza” di ricevere i dati, ma il fatto che la funzione loadData() è asincrona: vuol dire che, se non vengono generati errori, i dati sono ricevuti correttamente, ma in quanto asincrona tutto ciò che fa è “iniziare” l'operazione e restituire una Promise (hai visto il link?), cioè un oggetto che rappresenta l'operazione in corso di scaricamento dei dati.

    Leggi questo articolo che spiega bene qual è il principio di funzionamento e come gestirle.

    11/08/2023 - paololetto ha scritto:


    Inserendo varie console.log ho visto che l'esecuzione del listato che inizia da const boxMedici=[] salta useffect giunge fino alla fine delle istruzioni contenute in  {form===1 …} ritorna direttamente ad useffect , esegue la funzione loadata() e riparte dall'inizio -const boxMedici=[]- fino alla fine del {Form===1 … } saltando nuovamente useffect .A me sembra un comportamento strano ,è vero che useffect deve essere eseguito una sola volta, ma perchè non eseguirlo alla prima discesa ? Perdona la mia poca conoscenza , ma non ho mai avuto a che fare con il rendering.

    Mi sono un po' perso nella spiegazione, ma ad ogni modo credo si possa riassumere tutto così: la funzione che scrivi e che rappresenta il componente ha il compito di restituire gli oggetti della libreria React che descrivono l'interfaccia da mostrare, quindi ogni cosa che metti in quella funzione viene eseguita ogni volta che la libreria ha bisogno di fare il rendering; è quindi ovvio che se tu fai il rendering di un array vuoto e poi scarichi i dati, quando li vai a memorizzare nello stato React sa che deve fare nuovamente il rendering del componente, quindi va a eseguire la tua funzione, la quale richiede i dati e li aggiorna nello stato, quindi scatena ancora il rendering che avvia di nuovo il download dei dati, che aggiornano lo stato e fanno ripartire il rendering, ecc. ecc.

    L'uso di useEffect() serve a indicare nella funzione un callback (la funzione che scrivi tu) che va passata alla libreria React ed eseguita una volta sola.

    Non puoi fare il rendering avendo già i dati presi dal server, perché questo presupporrebbe il blocco del rendering stesso in attesa che i dati vengano scaricati, e in caso di lentezza del server potrebbero metterci anche molto tempo, bloccando di fatto l'applicazione.

    Taglio corto perché la spiegazione potrebbe essere lunga, e anche inefficace poiché in realtà quello che dovrei dire è che, sviluppando in React, prima di cimentarsi nella creazione di una app di una certa complessità, occorre studiare la libreria. Se si parte in quarta senza approfondire né JavaScript né i principi base di funzionamento della libreria, allora i problemi fastidiosi e senza spiegazione legati a una codifica errata del programma sono dietro l'angolo e richiederanno un tempo indefinito per la risoluzione, ammesso che a forza di incastrare cose “a sentimento” non si arrivi a un punto di non ritorno.

    Come per ogni disciplina, prima di svolgere un compito o usare uno strumento, bisogna studiarlo: non c'è scorciatoia. :)

Devi accedere o registrarti per scrivere nel forum
8 risposte