个人中心
gpt4 book ai didi

JavaScript setTimeout 0 阻塞页面渲染？

转载 作者：行者123 更新时间：2023-11-30 06:50:25 25 4
gpt4 key购买 nike

根据 this StackOverflow 问题

Changing the DOM is synchronous. Rendering the DOM actually happens after the JavaScript stack has cleared.

并根据this google 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 毫秒以下的时间延迟，并且发生的频率更高，延迟更小。

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

  1. 在这种情况下，只有延迟超过 16 毫秒的 setTimeout 不应阻塞，0 和 1 的延迟远小于 16 毫秒，因此它们都应该阻塞；

  2. 在 setTimeout 调用和 long 推送到消息队列之后(可选延迟)，现在调用堆栈为空，所以在这两种情况下 setTimeout 不应阻塞并且始终呈现“正在计算...”。

我的理解有什么问题吗？

最佳答案

可能与你的browser throttling the delay有关.

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

关于JavaScript setTimeout 0 阻塞页面渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53985101/

25 4 0
文章推荐： java - HtmlUnit - 获取两个没有 id 的标签之间的文本
文章推荐： javascript - 如何使用 AJAX 将图像发送到 Symfony Controller ？
文章推荐： Javascript 改变表单元素
文章推荐： java - 如何静态访问子类的重写方法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com