有哪些技术可以提高用户界面的响应性？

Question

在下面的例子中，谁能告诉我如何在不修改appendContent()的情况下让“点击时慢响应”响应更快？我想知道是否有一种方法可以将廉价的操作放在更昂贵的操作之前，并确保廉价的操作真正快速执行。

<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

对于用户必须等待的持续时间，反馈机制应该有所不同。小于0.1秒，并且用户不会注意到。

在1到10秒之间，你可以简单地显示一个符号，比如某种类型的动画gif，这表明你的应用程序正在处理。请参见jquery，我使用了一个ID为"processing“的http://www.ajaxload.info/，并使用微调控件对其进行样式设置，并在处理前后使用以下jQuery代码来显示和隐藏它。

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

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

如果超过10秒，最好提供处理时间的估计值。

有关这些数字的来源，请参阅Response Time Overview。

下面的代码立即将链接颜色更改为红色，并在不到一秒之后调用append方法。本质上，它允许浏览器在循环挂起之前执行单独的线程。超时可能需要根据浏览器进行调整。如果您需要以更通用的方式放弃控制，请查看Neil Mix的Threading in 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操作拆分成更小的部分。通常情况下，这些事情是通过在单独的线程中执行长操作来完成的。