Question

所以我发现这个链接很好地解释了如何加载脚本：

http://www.html5rocks.com/en/tutorials/speed/script-loading/

但是，如果我这样做，我很难理解会发生什么：

<script>
var script = document.createElement("script");   
script.src = "//www.domain.com/script.js";
document.getElementsByTagName("head")[0].appendChild(script);      
</script>

<script>
console.log(myVar);
</script>

script.js包含例如

var myVar = 'foobar';

所以我的问题是......因为script.js附加在单独的脚本标记中，这是否可以保证在script.js之前加载并执行console.log()？

Answer 1

从您关联的网站：

动态创建并添加到文档中的脚本默认为异步，它们不会阻止渲染并在下载后立即执行，这意味着它们可能以错误的顺序出现。（强调他们的）。

这意味着无法保证通过JavaScript添加到页面的脚本的执行顺序（如上例所示）。

如果您希望执行具有确定性，则需要手动禁用async属性：

var script = document.createElement("script");  
script.src = "//www.example.com/script.js";
script.async = false; // overwrite the default
document.getElementsByTagName("head")[0].appendChild(script);

Answer 2

在正常的脚本中，标签是同步的，所以它的阻塞：

<!-- BAD: blocking external script -->
<script src="//somehost.com/some_script.js"></script>

如果是async而没有阻塞：

<!-- GOOD: remote script is loaded asynchronously -->
<script>
  var script = document.createElement('script');
  script.src = "//somehost.com/some_script.js";
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

OR

<script async src="//somehost.com/some_script.js"></script>

因此，对于您的情况，在将var记录为允许异步脚本加载的选项之一之前，将不加载该脚本。

Check this for more info

附加到dom时的javascript执行顺序

2 个答案: