提高UI响应度的一些技巧有哪些？

问题描述：

在下面的例子中，任何人都可以告诉我如何使“单击时响应速度慢”更快地响应而无需修改appendContent（）？我想知道是否有办法将廉价操作放在更昂贵的操作之前，并确保廉价操作能够快速完成。提高UI响应度的一些技巧有哪些？

<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>

你可能想提供一些代码。 :) – Malfist 2009-02-23 22:25:41

好的。我相信。我会编写一个例子。 – morgancodes 2009-02-23 22:49:10

答

反馈的机制应该是用户必须等待的时长不同。小于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)     
    };

谢谢。在这一点上，数据已经在浏览器中，我只是重绘表格。我的问题是重绘似乎会干扰我的“处理”图形。 Settimeout有帮助，但不是那么多。 – morgancodes 2009-02-23 22:37:21

答

由于javascript没有很好的多线程支持，因此您需要将您的dom操作拆分为更小的部分。通常这些事情是通过在单独的线程中执行长操作来完成的。

答

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

使用诸如Yahoo！之类的库将使您的应用程序更快速，更容易出错，从而将此功能添加到您的应用程序中。

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

答

如果你想要做的仅仅是提供一些反馈的用户，让他们知道有什么地方发生什么，你可以尝试把GIF动画 - 加载圈什么的，旁边的按钮和禁用按钮本身，然后在重绘完成后将事情恢复正常。

答

试试这个：默认添加一个包含你的加载图形的div，但是将CSS设置为display：none。然后，单击div＃绘图时，将加载图形的显示设置为阻止，然后执行绘制。绘图完成后，将显示设置回无。

提高UI响应度的一些技巧有哪些？

相关推荐