Question

我正在寻找有关浏览器如何执行与页面其余部分相关的异步样式脚本的更多信息。

我有一个遵循异步加载模式的JS脚本，如下所示：

var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);

我知道这是一个非阻止下载，在下载时页面会继续加载。到现在为止还挺好。现在让我们稍后说明我声明了一些变量：

var x = "something";

我的问题是，此变量是否可用于我之前加载的脚本？如果我做了

alert(x);

在上面加载的脚本中，它似乎工作，但我不确定它将永远是这样的。还有DOM元素呢？如果页面中稍后有一些div：

<div id="myDiv"></div>

在我的脚本中我做了

var div = document.getElementById("myDiv");

这会正常吗？在我的测试中，这些东西似乎有效，但我不确定是否有更多的页面内容，它们是否可以被异步脚本看到。

所以我的问题基本上可以缩小到，从异步加载的脚本访问项目而不检查某些DOM加载的事件是否安全？

Answer 1

通过添加<script>并将async设置为true，然后将<script>中的变量声明为更低的啄食顺序，无论变量是否可用，都是竞争条件在第一个。

如果第一个<script>被缓存，或者第二个<script>的执行被延迟（即第一个/第二个之间的元素是同步的并且加载缓慢），你将最终得到变量未定义。
您可以保证<script>不早于它在DOM中的位置执行。如果<div>位于 <script>之前，则始终可用。否则拉吸管。

在这些情况的两个中，您可以在事件处理程序中包含脚本中包含的JavaScript代码，这些事件处理程序正在侦听诸如window.onload或DOMContentLoaded事件之类的事件，以延迟执行直到这些事件被触发（并且所有<scripts>都将存在且正确）。

Javascript异步加载和执行顺序

1 个答案: