Quali sono le tecniche per migliorare la reattività dell'interfaccia utente?

Question

Nell'esempio riportato di seguito, qualcuno può dirmi come fare "risposta lenta quando si fa clic" rispondere più rapidamente senza modificare appendContent ()? Mi chiedo se c'è un modo per posizionare le operazioni a basso costo prima di quelli più costosi, e assicurarsi che quelli a buon mercato in realtà vengono eseguiti rapidamente.

<div id="draw">slow response when clicked</div>

<div style="overflow: auto; height: 300px; border:solid 1px grey" id="content"></div>

<script language="javascript">

    var clickLink = document.getElementById("draw");
    var contentDiv = document.getElementById("content")

    function appendContent(){
        contentDiv.innerHTML =  contentDiv.innerHTML + "hello ";
    }

    clickLink.onclick = function(){
        clickLink.style.color = "red";
        for (var i = 0; i < 1500; i++){     
            appendContent();    
        }
    };
</script>

Answer 1

Il meccanismo di feedback dovrebbe essere diverso per la durata che l'utente deve aspettare. Meno di 0,1 secondi e un utente non se ne accorgerà.

Tra 1 e 10 secondi si può semplicemente visualizzare un simbolo come una gif animata di qualche tipo che indica la vostra applicazione è in fase di elaborazione. Vedere http://www.ajaxload.info/ Io uso un div con un "trattamento" ID e lo stile con un filatore e utilizzare il seguente codice jQuery per mostrare e nascondere prima e dopo il processo.

function showProcessing(){
    $("#processing").fadeIn("fast");
}

function hideProcessing(){
    $("#processing").fadeOut("fast");
}

Al di là di 10 secondi, sarebbe ideale per fornire una stima del tempo di elaborazione.

Tempo di risposta Panoramica per la fonte di questi numeri.

Il codice seguente cambia immediatamente il colore del collegamento al rosso e chiama il metodo append una frazione di secondo più tardi. In sostanza permette è il browser per eseguire un thread separato prima di essere appeso in un ciclo. Il timeout può avere bisogno di essere regolata a seconda del browser. Visualizza il Mix di Neil Threading in JavaScript 1.7 se è necessario cedere il controllo in modo più generico.

    function startAppend(){
      for     (var i = 0; i < 1500; i++){             
              appendContent();        
      }
    }

    clickLink.onclick = function(){
            clickLink.style.color = "red";
            setTimeout('startAppend()', 10)                
    };

Answer 2

Se ciò che si vuole fare è semplicemente fornire all'utente un feedback in modo che sappiano cosa sta succedendo, si può provare a mettere una gif animata - un cerchio di carico o qualcosa del genere, accanto al pulsante e la disattivazione del pulsante stesso, quindi impostando le cose torna alla normalità dopo il redraw è completa.

Answer 3

dal momento che javascript non hanno un buon supporto multithreading, è necessario dividere il funzionamento dom in parti più piccole. Normalmente ciò viene fatto tramite l'esecuzione di operazione prolungato nel thread separato.

Answer 4

Il Yahoo! User Interface Library ha un sacco di buon codice e controlli che già utilizzano tecnologie come AJAX per migliorare la reattività percepito dell'applicazione web.

Utilizzo di una libreria come la volontà di Yahoo! 'S fatto l'aggiunta di questa funzionalità alla vostra applicazione molto più veloce e meno soggetto a errori.

http://developer.yahoo.com/yui/

Answer 5

Prova questo: aggiungere un div contenente il grafico di carico di default, ma impostare il CSS display: none. Poi, quando il div # sorteggio viene cliccato, impostare la visualizzazione della grafica di carico per bloccare e poi fare il disegno. Quando il disegno è finito, impostare la visualizzazione di nuovo a nessuno.