「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」
前言知识
- 你最好有一定的前端基础，对 JavaScript 有一定的了解；
- 对
<script>有所了解； - 对
立即执行函数有所了解；
//两种常见立即执行函数（这两种写法是等价的）：
//一个是一个匿名函数包裹在一个括号运算符中，后面再跟一个小括号
( function myFunc(){} )()
//一个是一个匿名函数后面跟一个小括号，整个包裹在一个括号运算符中
( function myFunc(){}() )
必不可少的 script 标签知识
script 标签
- 标签特性：
1、script 标签主要是用于从服务端加载javascript脚本并在当前页面中执行；
2、script 标签默认是同步加载；
3、当 Html 页面加载的过程中遇到了 script 标签，如果之前已经加载了部分 Html 内容，那么它会先将之前加载的Html内容渲染出来，然后再去加载对应的javascript脚本；
script 特性
页面加载过程中，如果遇到了 script 标签，那么会将之前已经解析的 Html 内容先渲染出来 ，然后再去服务器加载对应的 javascript；所以我们通常需要将 script 标签放到 body 标签之后 ，以便尽早的展现 Html 内容;
script 优化
script 标签默认是同步加载的，但是 其提供了一些属性可以变成异步加载 ，如: async、defer、type="module" ;
async：异步加载javascript脚本时不会阻塞 Html 页面的渲染，当 javascript 加载完成后，若此时 Html 页面未加载完成，那么就会阻塞页面的渲染，等 javascript 执行完成后再继续 Html 页面的加载；
defer：异步加载javascript脚本时也不会阻塞页面渲染，当对应的 javascript 加载完成后，若此时 Html 页面还未加载完成，那么就不会阻塞页面的渲染，等 Html 页面加载完成后再接着执行加载完成的 javascript 脚本；
type="module" ：它也是能起到异步加载的效果，效果同 defer，不过其可以配合 async 属性让 javascript加载完成后立即执行；
网页加载 JS 遇到立即执行函数
- 一般的 JS 引入模式，进行同步的加载和执行，阻塞
DOMTree的加载，按文档顺序，加载完毕后执行，直到脚本执行完毕，随后继续执行DOMTree的加载；
<script src="myJS.js"></script>
async引入模式，进行异步并行加载和执行；不阻塞DOMTree的加载，并一旦加载完毕它就执行 js；无论 script 标签的顺序，不允许使用document.write()方法；
<script async src="myJS.js"></script>
defer引入模式，script立刻并行异步地下载，在DOMTree渲染完成后，DOMContentLoaded之前开始按照引入顺序依次执行，直到结束；
<script defer src="myJS.js"></script>
模式对比如下
例子：
// myJS.js文件如下
alert("这个是 myJS.js");
——————————————————————————————
<script type="text/javascript" src=" myJS.js"></script>
<script type="text/javascript">
alert("这个是 myJS1.js");
</script>
<script type="text/javascript">
alert("这个是 myJS2.js");
</script>
总结：
上面例子的结构在打开页面时，是按照前后顺序对立即执行的函数进行执行；因为 js 是逐行去执行的，立即执行的函数在不受上下文影响的时候是按照先后顺序执行的；所以大家看到这里应该就能懂了吧；如有问题欢迎在下面讨论！
文中若有错误，请不吝指出，非常感谢！
