JavaScript setTimeout 0 阻塞页面渲染？答案

【问题标题】：JavaScript setTimeout 0 blocking page rendering?JavaScript setTimeout 0 阻塞页面渲染？
【发布时间】：2019-05-27 20:20:23
【问题描述】：

根据thisStackOverflow的问题

更改 DOM 是同步的。渲染 DOM 实际上是在 JavaScript 堆栈清除之后发生的。

而根据thisgoogle doc，屏幕刷新率60fps大致相当于每16ms刷新一次，我写了这个例子：

<!DOCTYPE html>
<html>
    <head>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelector('#do').onclick = function() {
                    document.querySelector('#status').innerHTML = 'calculating...';
                    // setTimeout(long, 0); // will block
                    setTimeout(long, 1); // will not block
                };

                function long(){
                  let result = 0
                  for (let i = 0; i < 1000; i++) {
                    for (let j = 0; j < 1000; j++) {
                      for (let k = 0; k < 1000; k++) {
                        result += i + j + k;
                      }
                    } 
                  }
                  document.querySelector('#status').innerHTML = 'calculation done';
                  document.querySelector('#result').innerHTML = result.toString();
                }
            });
        </script>
    </head>

    <body>
        <button id='do'> Do long calc!</button>
        <div id='status'></div>
        <div id='result'></div>
    </body>
</html>

用 jsfiddle link

我玩弄了代码，发现阻塞发生的时间延迟低于 12 毫秒，并且发生的频率更高，延迟更小。

我有两种不同的理解方式：

在这种情况下，只有延迟超过 16 毫秒的 setTimeout 不应该阻塞，0 和 1 的时间延迟都小于 16 毫秒，所以它们都应该阻塞；
在setTimeout 调用和long 推送到消息队列之后（带有可选延迟），现在调用堆栈为空，因此在这两种情况下setTimeout 不应阻塞并始终“计算...”被渲染。

我的理解有什么问题？

【问题讨论】：

标签： javascript ajax settimeout

【解决方案1】：

可能与您的browser throttling the delay有关。

看起来好像大多数浏览器都忽略了值 0，可能值得为您的浏览器查看 DOM_MIN_TIMEOUT_VALUE。

【讨论】：

感谢 reddington，这正是我要找的！
请详细说明广告 MDN 提供的信息。如果没有链接，您的答案将无法提供足够的信息。至少引用相关信息。