具有“异步”属性的 Javascript - 它可以更改在它下面定义的 DOM 元素吗？

Question

我的 HTML 的正文：

<body>
   <script async src="changeParContent.js"></script>
   <script> \\some irrelevant inline code that takes a long time to run
   </script>
   <p id='par1'>Initial text</p>
</body>

这里是 changeParContent.js：

document.getElementById('par1').innerHTML = "The content was changed!"

我预计 Javascript 会失败，因为我使用了异步属性。 这意味着在解析 HTML 时将下载并执行脚本。 现在，由于我故意减慢 HTML 的解析速度，我预计 javascript 在定义“p1”段落之前运行。

我认为我做了一件你不应该做的事情——定义在脚本下面的异步脚本中使用的 DOM 元素。

但它以某种方式起作用并且段落发生了变化。 怎么会这样？

Answer 1

异步脚本并不真正以任何可预测的方式运行，这主要取决于浏览器的实现。 例如，您应该在 Chrome 中找到以下作品：

<body>
   <script async src="./changeParContent.js"></script>
   <script>
         function sleepFor(sleepDuration){
                var now = new Date().getTime();
                while(new Date().getTime() < now + sleepDuration){ /* Do nothing */ }
        }
        sleepFor(5000);
   </script>
   <p id='par1'>Initial text</p>
</body>

但是在 Firefox 中抛出以下错误：

Uncaught TypeError: document.getElementById(...) is null

似乎在这两种浏览器中，缓慢的内联script都会阻止async脚本运行和 DOM 的 rest 加载。 然后在这个慢速脚本运行后， async脚本与 DOM 加载的 rest 并行运行。 在我的实验中，似乎在 Chrome 中 DOM 赢得了比赛，这不会导致任何错误，因为元素在async脚本运行时已加载。 然而，在我的 Firefox 测试中， async脚本赢得了比赛，它抛出了一个错误。

我认为这里的教训是要相信最佳实践，即使看起来您的代码没有问题。

具有“异步”属性的 Javascript - 它可以更改在它下面定义的 DOM 元素吗？

问题描述

1 个解决方案

解决方案1
2 2022-05-04 16:25:57

具有“异步”属性的 Javascript - 它可以更改在它下面定义的 DOM 元素吗？

问题描述

1 个解决方案

解决方案1 2 2022-05-04 16:25:57

解决方案1
2 2022-05-04 16:25:57