Javascript 各种类型的加载与执行顺序

  1. script src + defer

    <script src="xx" defer></script>
    

    是否阻塞parse: 不阻塞
    执行时机:parse结束后待js文件全部加载完成后,按照script出现的顺序执行,全部执行完触发DOMContentLoaded事件

  2. script type=module + src

    <script type=module src='xx'></script>
    

    同1

  3. script type=module + 代码块

    <script type='module'>
    code
    </script>
    

    同1,虽然代码已经在本地,还是会在下个时间点的下个时间点执行

  4. script src

    <script src="xx"></script>
    

    是否阻塞parse: 阻塞, 停止parse,但是会触发preLoad
    执行时机:停止parse,等待js文件加载完成后,如果前面没有css文件加载,立即执行js,恢复parse;如果前面有css文件加载,则等待css加载完毕,解析css完成后,立即执行js,恢复parse。preLoad 的css 的加载不会影响到js

  5. script src + async

    <script src="xx" async></script>
    

    是否阻塞parse: 不阻塞, 继续parse
    执行时机:js文件加载完成后,下一个时间点执行js(相当于setTimout(fn, 0))

  6. script 代码块, 前面没有css文件在加载

    <script>
    code
    </script>
    

    是否阻塞parse: 不阻塞, 执行完代码继续parse
    执行时机:立即执行js,执行完继续parse

  7. script 代码块, 前面有css文件在加载

    <script>
    code
    </script>
    

    是否阻塞parse: 阻塞, 同4,停止parse,但是会触发preLoad
    执行时机:待css文件加载完毕,解析完css后,立即执行js,执行完继续parse

  8. 动态插入的script标签

    document.append(script)
    

    同5,动态标签不受defer,async,type='module'影响,全部async

  9. script type=module + defer

    <script type=module defer></script>
    

    同5,async优先级高于defer

  10. script async + defer

    <script src='xxx' async defer></script>
    

    同5

  11. script 代码块 + defer

    <script defer>
    code
    </script>
    

    script代码块不支持 defer,同6或7

  12. script 代码块 + async

    <script async>
    code
    </script>
    

    script代码块不支持 async,同6或7

  13. script 代码块 + src

    <script src='xxx'>
    code
    </script>
    

    忽略代码块中的code,优先src

results matching ""

    No results matching ""