现在的位置: 网页制作教程网站制作经验 >正文
JavaScript脚本

如何控制JS在网页中加载执行顺序

发表于2017/3/16 网站制作经验 0条评论 ⁄ 热度 2,205℃

一个网页中往往要加载多个外部js文件,这些js文件的执行顺序是怎样的?如何控制js的执行顺序?

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>

先加载执行a.js,完毕后再加载执行b.js。

<script type="text/javascript">
    document.write('<script type="text\/javascript" src="a.js"><\/script>');
    document.write('<script type="text\/javascript" src="b.js"><\/script>');
</script>

先执行a.js,完毕后再执行b.js。

<script type="text/javascript">
    document.write('<script type="text\/javascript" src="a.js"><\/script>');
    var sc=document.createElement("script");
    sc.setAttribute("src","b.js");
    document.getElementsByTagName("head")[0].appendChild(sc);
</script>

这就不可以确定谁先执行了,因为通过创建script标签引入的JS,是谁先加载完毕谁先执行,与创建顺序无关。

<script type="text/javascript">
    var js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('async', true);		//true:按照加载顺序;false:按照创建顺序
    js.setAttribute('src', url);
    document.getElementsByTagName('head')[0].appendChild(js);
</script>

对于创建script标签引入JS来讲,在某些高级浏览器中有async属性用于控制是按照加载完毕的顺序执行,还是按照创建顺序执行。

  • 暂无评论