在继续执行javascript之前，是否可以强制浏览器呈现DOM更改？

我正在填充一个大约有500行的表，这需要浏览器几秒钟来渲染，而它看起来是冻结的。这就是为什么我想显示一条消息，询问用户的耐心：

$.ajax({
  url: '{{ search_url }}',
  success: function (response) {
    $('#progress').text('Rendering results, please wait...');
    clear_table();
    populate_table(response);
  }
});

消息没有显示-很明显，浏览器（在Chrome 23中测试）缓冲所有DOM更改，并一次性呈现所有更改

作为一种解决方法，我发现当我延迟填充表直到执行返回到事件循环时，实际上会显示消息：

$.ajax({
  url: '{{ search_url }}',
  success: function (response) {
    $('#progress').text('Rendering results, please wait...');
    window.setTimeout(function () {
      clear_table();
      populate_table(response);
    }, 0);
  }
});

---

我想知道这种方法是否总是有效，或者是否有更好的技术用于这种情况。

之所以会出现这种情况，是因为Javascript执行是单线程的。因此，在执行所有JS代码之前，浏览器不会做任何事情——换句话说，它将冻结。为了防止出现这种情况，我建议您使用（这只是几行代码），它会定期将控制权返回给浏览器（通过使用

setTimeout

）。这可以防止浏览器冻结，并显示等待消息，不会出现任何问题。

消息应该在ajax调用启动之前触发，而不是在成功回调中。是的，您的

设置超时将是合适的解决方案，而且它将始终有效……而且可能还会提高
填充表的性能。500行并不是那么多，所以看起来不需要太长时间来处理。是的，对我来说也有点奇怪。好的，这是jQuery，其中涉及到列宽调整，但我会看看是否可以组合一个单独的测试用例。完成：/Nice，因为填充已经是$。每个都是20个字符的更改。它使用了和我的解决方法相同的技术。已经有一段时间了。。。但因为我有一个类似的问题（Chrome83在扩展名中的$.each循环中没有更新按钮的文本/html），我想知道：为什么它在Firefox中工作？在哪里可以了解有关所有浏览器之间渲染策略差异的更多信息？