javascript - 为什么在执行Javascript时未触发浏览器重排？

在我正在开发的应用程序的UI中，我一直试图在特定（同步）处理开始之前显示“加载程序” div，并在处理结束后将其隐藏。但是，在整个处理过程中，加载程序根本不会出现。

我发现浏览器尝试通过消除不必要的重排来优化渲染过程。有一些方法可以手动触发重排过程（例如我的情况），但是我还没有设法使它们中的任何一个起作用。您可以在下面的一个最小示例中找到，其中offsetHeight的计算用于触发重排，但TEST div根本没有出现。

<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<div id="test" style="display:none; background-color:red; height:500px">TEST</div>

<script>
    function reflow() {
        var t = $("#test")[0].offsetHeight;
        $(window).trigger('resize');
        window.getComputedStyle($("#test")[0], null);
        $("#test").focus();
    }

    $("#test").show();
    reflow();
    console.log("Processing started");
    var sum = 0;
    for(i = 0; i < 100000000; i++) {
        sum += i;
    }
    console.log("Processing ended");
    $("#test").hide();
<script>
</body>
</html>

工作的JSFiddle也here

以下是一些强制重排的方法（如您在脚本中所看到的）：

offsetHeight元素的计算
调整窗口大小
window.getComputedStyle（）
元素焦点

注意：我知道可以通过添加超时来解决。但是，我想找到一种方法来强制重排，因为超时是一个“ hack”，不适用于此功能。

最佳答案

将setTimeout与“ 0”参数一起使用进行等待，这将迫使它停止足够长的时间才能使您的显示/隐藏工作。

https://jsfiddle.net/o3y60e0L/3/

$("#test").show();
var t = $("#test")[0].offsetHeight;
console.log("Processing started");
setTimeout(function() {
    var sum = 0;
    for(i = 0; i < 1000000000; i++) {
        sum += i;
    }

    console.log("Processing ended");
    $("#test").hide();
}, 0);