gpt4 book ai didi

javascript - 为什么 DOMContentLoaded 处理程序可以阻止第一次绘制?

转载 作者:行者123 更新时间:2023-12-01 15:01:50 29 4
gpt4 key购买 nike

有一个similar question那没有解决。
我遇到了这样一种情况,即监听 DOMContentLoaded 的处理程序可以阻止第一次绘制。
有时会阻塞,有时不会
我尝试了很多次 cmd + R 来查看它。这种行为有什么解释吗?
我还录制了一段视频来展示这一点:
https://www.youtube.com/watch?v=EDZQ1nLCK2w&feature=youtu.be

  • 当您在重新加载后看到一个空白页面时,这意味着 DOMContentLoaded 阻止了第一次绘制
  • 当您看到文本“一些文本”然后重新加载后出现空白页时,这意味着 DOMContentLoaded 没有阻止第一次绘制

  • window.addEventListener('DOMContentLoaded', () => {
    let i = 0;
    while (i++ < 1000000000) {
    continue;
    }
    document.getElementById('el').remove();
    });
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <p id="el">Some text</p>
    </body>
    </html>

    最佳答案

    这是一个竞赛条件。有时,在您添加监听器之前,文档已经加载/交互。
    您可以通过检查文档的 readyState 来查看差异:document.readyState .您的代码没有运行,因为有时状态已经是 interactivecomplete , 表示 DOMContentLoaded在您实际添加监听器之前,事件已经触发。
    处理它的方法是这样的:

    function init() {
    let i = 0;
    while (i++ < 1000000000) {
    continue;
    }
    document.getElementById('el').remove();
    }

    if (document.readyState === 'loading') {
    // Document not yet loaded, so wait for it.
    window.addEventListener('DOMContentLoaded', init);
    } else {
    // Document is ready (interactive or complete), so call init immediately.
    init();
    }

    关于javascript - 为什么 DOMContentLoaded 处理程序可以阻止第一次绘制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63094476/

    29 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com