js脚本加载执行顺序_js加载顺序-优快云博客

本文链接：https://blog.youkuaiyun.com/czz19910404/article/details/129530165

1、正常使用引入的外部js，按照代码引入顺序加载并执行，遇到script标签时，会阻塞后续html的解析
2、使用defer属性标记加载的脚本，属于异步加载，不会阻塞后续html的解析，脚本加载和后续解析同步进行，但是脚本加载后并不执行，会等到整个html解析完毕再执行。
3、使用async属性标记加载的脚本，属于异步加载，不会阻塞后续html的解析，脚本加载和后续解析同步进行，但是脚本加载后立即执行，因此无法保证多个脚本的执行顺序，需要严格控制引用顺序的时候不应该使用。
4、document.write(),加载时会先加载后续使用正常<sacript标签引入的文件>。执行时，如果都是外部文件，则按照文件引入顺序执行，，如果有内部脚本，则会先执行内部脚本

<<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <!-- <script type="text/javascript" src="./index1.js"></script>
    <script type="text/javascript" src="./index2.js"></script> -->
    <script type="text/javascript">
     
    document.write('<script type="text/javascript" src="./index1.js"><\/script>');
     
    document.write('<script type="text/javascript" src="./index2.js"><\/script>');
     
    console.log('我是内部脚本')
    </script>
    <script type="text/javascript" src="./index3.js"></script>

</body>
</html>

在这里插入图片描述