JavaScript异步加载和执行顺序

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

1. 通过在<script>低下来啄食顺序添加<script>与async设置为true，然后声明一个变量，它是一个竞争状态变量是否在第一个可用的。

   如果第一<script>被高速缓存，或者如果第二<script>的执行被延迟（即，其间第一/第二元件是同步的，加载缓慢），你将结束与该变量是未定义的。

2. 您可以保证<script>的执行时间不会早于它在DOM中的位置。如果<div>定位在之前<script>，它将总是可用。否则拉吸管。

在的这些情况你可以用包含在事件处理程序的脚本，它们监听事件中的JavaScript代码都直到这些事件已解雇如window.onload或DOMContentLoaded事件拖延执行（和所有<scripts>将会出现并更正）。