js加载与执行

1. JavaScript采用单线程，是为了避免在执行过程中页面内容被不可预知的重复修改。
2. 由于JavaScript的阻塞特性，在每一个<script>出现的时候，无论是内嵌还是外链的方式，它都会让页面等待脚本的加载解析和执行
3. 带defer属性的<script>标签在DOM完成加载之前都不会去执行，无论是内嵌还是外链方式。

<script src="index.js" defer ></script> 
<script src="index.js" async ></script> 

4. async需要加载完成后就会自动执行代码，但是defer需要等待页面加载完成后才会执行。
5. defer，文档完成解析后，触发 DOMContentLoaded 事件前执行

结合DOM文档加载的加载步骤，DOMContentLoaded事件/Load事件，触发时机如下：
1、解析HTML结构。
2、加载外部脚本和样式表文件。
3、解析并执行脚本代码。// 部分脚本会阻塞页面的加载
4、DOM树构建完成。//DOMContentLoaded 事件
5、加载图片等外部文件。
6、页面加载完毕。//load 事件
https://www.jianshu.com/p/ca8dae435a2c

6. 动态添加脚本元素：论这段脚本是在何时启动下载，它的下载和执行过程都不会阻塞页面的其他进程
   1. 通过这种方式下载文件后，代码就会自动执行。但是在现代浏览器中，这段脚本会等待所有动态节点加载完成后再执行。
   2. 是在onLoad之后在执行？还是其他的js执行完之后；
   3. chrome测试发现，会在其他js执行完之后再执行动态添加的js；所以才加载完成的事件来方便执行完一个再执行下一个
7. 在 DOM 中动态执行脚本
   1. 与内联脚本不同的是，外部脚本的插入是异步的不会阻塞 DOM 解析或者渲染；这意味着动态插入一个外部脚本后不可立即使用其内容，需要等待加载完毕。