Quais são algumas técnicas para melhorar a capacidade de resposta da interface do usuário?

Question

No exemplo abaixo, alguém pode me dizer como fazer "resposta lenta quando clicado" responder mais rapidamente sem modificar appendContent ()? Eu estou querendo saber se há uma maneira de operações lugar barato antes de mais caros, e certifique-se as mais baratas começar realmente realizado 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

O mecanismo de feedback deve ser diferente para a duração o usuário tem que esperar. Menos de 0,1 segundos e um usuário não notará.

Entre 1 e 10 segundos, você pode simplesmente exibir um símbolo, como um GIF animado de algum tipo que indica a sua aplicação está a processar. Consulte http://www.ajaxload.info/ Eu uso uma div com uma ID "processamento" e estilo com um spinner e utilizar o seguinte código jquery para mostrar e ocultar-lo antes e depois do processo.

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

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

Além de 10 segundos seria ideal para fornecer uma estimativa do tempo de processamento.

Tempo de Resposta Overview para a fonte desses números.

O código a seguir imediatamente muda a cor do link para vermelho e chama o método de acréscimo de uma fração de segundo depois. Essencialmente é permite que o navegador para executar um segmento separado antes de ficar pendurado em um loop. O tempo limite pode precisar de ser ajustado dependendo do browser. Confira Neil Mix Enfiar em JavaScript 1.7 se você precisa controlar ABANDONO de uma forma mais genérica.

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

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

Answer 2

Se o que você quer fazer é simplesmente fornecer ao usuário um feedback para que eles saibam acontecimento de algo, você pode tentar colocar um GIF animado - um círculo de carga ou algo assim, ao lado do botão e desativando o próprio botão, em seguida, definir as coisas volta ao normal após o redesenho é completa.

Answer 3

desde javascript não tem uma boa multithreading apoio, é necessário dividir a sua operação de dom em partes menores. Normalmente essas coisas são feitas via executar a operação longa no segmento separado.

Answer 4

A Biblioteca de Interface de Usuário Yahoo tem um monte de código bom e controlos que já utilizam tecnologias como AJAX para melhorar a capacidade de resposta percebido do seu aplicativo web.

Usando uma biblioteca como o Yahoo! 'S testamento feito adicionando essa funcionalidade para o aplicativo muito mais rápido e menos propenso a erros.

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

Answer 5

Tente isto: adicionar um div que contém o gráfico de carga por padrão, mas definir o CSS para display: none. Então, quando a div # sorteio é clicado, defina a exibição do gráfico de carga para o bloco e, em seguida, fazer o seu desenho. Quando o desenho estiver concluído, definir a volta de exibição a nenhum deles.