What are some methods to improve responsiveness of an interface?

Question

In the example below, can someone tell me how to make the “slow response on click” faster without changing appendContent ()? I am wondering if there is a way to place cheaper operations in front of more expensive ones, and make sure that cheap ones are really speeding up.

<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

The feedback mechanism should differ depending on the length of time the user waits. Less than 0.1 seconds and the user will not notice.

1 10 , gif, , . . http://www.ajaxload.info/ div "" jquery, .

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

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

10 .

. .

. , , . , . Neil Mix Threading JavaScript 1.7, .

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

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

Answer 2

, , , -, gif - - , .

Answer 3

javascript , dom . .

Answer 4

Yahoo , , AJAX, -.

, Yahoo! .

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

Answer 5

: div, , CSS : none. , div # draw, , . , "".