Javascript未立即更新网页/显示缓慢

Question

在网页上，我有一系列用作按钮的图像。当用户单击图像时，我通过javascript添加边框(向用户显示他们单击了图像)，然后执行一些密集的客户端处理(向网格/表添加过滤器，并更新表)。

即使我在第一步中添加了一个边框到我的图像中，在应用过滤器/表更新之前，它在视觉上不会发生变化，大约3-4秒后。它的行为就像是将边界更新放入队列中，并且直到PC空闲时才进行处理。因为一个相邻的'console.log‘命令会立即执行。

实际执行的代码是：

  console.log('Button number 4 processing');
  // Add the border to the button
  document.getElementById("img_es").style.border = "2px solid black";   

最终结果是系统在最终用户看来运行缓慢。

在其他系统/语言中，我可以告诉PC清空消息队列，也就是processMessages，这会导致屏幕更新。在Javascript/HTML中有什么可比的吗？

Answer 1

如果您执行了大量涉及DOM的操作，浏览器呈现引擎可能会被阻塞。

或者在timeout()的帮助下将长时间运行的操作的开始延迟一小段时间(比如50ms)：

 setTimeout(function(){ /* expensive calculations here */); }, 50);

或者，您可以将图像包装在一个链接中，然后使用CSS伪类:active绘制边框，请参见description。这应该是异步工作的。

 a img {
    border: 0;
 }

 a:active img {
    border: 2px solid black;
 }