个人中心
gpt4 book ai didi

javascript - 在 Firefox 上，异步回调在 DOMContentLoaded 之前运行

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

我一直在做一些实验来理解 DOMContentLoaded event 。在实验过程中，我发现 Firefox 和 Chrome(在 Ubuntu 上)之间有一个有趣的区别。

我有这个 HTML 文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script>
        console.log('script is running');

        document.addEventListener( "DOMContentLoaded", function() {
            console.log('DOM content loaded');
        }, false );

        var x = 0;
        for(var i = 0; i < 900000000; i++) {
            x++;
        }

        setTimeout(function() {
            console.log('timeout callback is running');
        }, 10);

        console.log('script finished');
    </script>
</head>
<body>
    <div>div content</div>
</body>
</html>

Firefox 控制台中的输出:

script is running
script finished
timeout callback is running
DOM content loaded

在 Chrome 控制台中我得到:

script is running
script finished
DOM content loaded
timeout callback is running

如果我将超时设置为 100 毫秒，我也会在 Firefox 中获得 Chrome 的输出。

那么，在 Firefox 上，即使 DOMContentLoaded 被触发，超时回调似乎也会“劫持”下一帧？或者也许它只在回调返回后触发？

[编辑]

我添加了一个动态加载的脚本:

console.log('script is running');

document.addEventListener( "DOMContentLoaded", function() {
    console.log('DOM content loaded');
}, false );

setTimeout(function() {
    console.log('timeout callback is running');
}, 1);

var script = document.createElement('script');
script.src = 'dynamic.js';
document.head.appendChild(script);

var x = 0;
for(var i = 0; i < 1000000000; i++) {
    x++;
}

console.log('script finished');

动态.js:

(function() {
    console.log('dynamic script is running');

    var x = 0;
    for(var i = 0; i < 2000000000; i++) {
        x++;
    }

    console.log('dynamic script finished');
})();

现在，Firefox 控制台输出是:

script is running
file:///foo/bar/dynamic.js
script finished
dynamic script is running
dynamic script finished
timeout callback is running
DOM content loaded

那么 Firefox 甚至会在 DOMContentLoaded 回调运行之前等待动态加载的脚本返回？

最佳答案

两者都是异步的，并且没有因果关系。这是预期的race condition - 有时 DOM 快于 10 毫秒，有时则不然。

当然，结果 - 如果它们是可重现的 - 可能表明 Chrome 比 Firefox 更快，或者 Firefox 只是优先考虑超时而不是 DOM 事件。没关系。没有一个实现是“错误的”。

关于javascript - 在 Firefox 上，异步回调在 DOMContentLoaded 之前运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36034688/

25 4 0
文章推荐： php - 关闭 php 标签时出错
文章推荐： javascript - 将两个日期系列合并为一个
文章推荐： html - Angular4 nav nav-tabs 样式不起作用
文章推荐： javascript - jQuery 间隔在到达最后一个元素后重新启动
行者123
个人简介

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

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