javascript - 提高 UI 响应能力的技巧有哪些？

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，表明您的应用程序正在处理。参见 http://www.ajaxload.info/我使用 ID 为“processing”的 div 并使用微调器设置样式，并使用以下 jquery 代码在处理前后显示和隐藏它。

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

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

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

参见 Response Time Overview这些数字的来源。

以下代码立即将链接颜色更改为红色，并在几分之一秒后调用附加方法。本质上是允许浏览器在陷入循环之前执行一个单独的线程。超时可能需要根据浏览器进行调整。查看 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)                
    };