关于 JavaScript 的加载执行顺序

问题描述

问 题

在页上有两个script标签，第一个script标签内动态创建了一个script，去加载一个config.js文件，第二个script标签内，需要用到动态加载的config。如下：

config.js

  window.config={
    appName:'name',
    appId:'appId'
  }

index.html

//第一个script
<script type="text/javascript">
  (function () {
    var script=document.createElement('script');

    //设置为同步加载
    script.async=false;
    script.src='config.js';

    document.head.appendChild(script);
    //此时head内有了这个script标签，
    //它会去加载config.js
    //因为设置的是同步;async=false;
    //此时程序应该停在此处，等待config.js的加载执行
  })();
</script>

//第二个script
<script>
  (function () {
    var config=window.config;

    //js的加载执行是同步的，
    //按理说，程序执到这里时，动态加载的config.js文件已经加载执行完毕
    //window.config应该是有数据的
    //但实际上此时config为undefined
    //也就是说动态加载的js文件，并没有阻塞其后的代码执行
    //这是为什么？？
    console.log(config);//undefined
  })();
</script>

为什么在第二个script标签内读取window.config时，却是undefined??

解决方案

啊，那纯粹是因为下载的异步性

如果用 script.text 就没这问题了

至于为什么 document.write 可以，那是因为浏览器会选择下载完再继续解析 HTML

这篇关于关于 JavaScript 的加载执行顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！