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的div并使用微调器对其进行样式化，并使用以下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操作拆分为较小的部分。通常这样的事情是通过在单独的线程中执行长操作来完成的。

Answer 4

Yahoo用户界面库有很多优秀的代码和控件，它们已经使用AJAX等技术来提高Web应用程序的感知响应能力。

使用像Yahoo！这样的库将使您的应用程序更快，更不容易出错。

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

Answer 5

尝试此操作：默认情况下添加包含加载图形的div，但将CSS设置为display：none。然后，当单击div＃draw时，将加载图形的显示设置为block，然后进行绘制。绘图完成后，将显示屏设置为无。

有哪些技术可以提高UI响应能力？

5 个答案: