script标签加载模式

引言：在传统开发过程中，我们都会在HTML文件中引入script标签，当浏览器碰到脚本时加载JS代码用来操控网页元素，今天我们来八卦一些它的加载模式

script标签有三种加载模式：默认加载、async加载、defer加载

<script src="xxx.js" defer></script>

默认加载，浏览器逐步解析运行，当遇到JS就立即执行

<script async src="xxx.js"></script> 

asycn加载，浏览器逐步解析运行，当遇到JS就把后续要加载渲染的文档元素和当前执行到的JS异步并行执行

<script async src="xxx.js" ></script> 

defer加载，浏览器逐步解析运行，当遇到JS就把后续要加载渲染的文档元素和当前执行到的JS异步并行执行，但是并行执行过程中要等待DOM元素全部解析完成(DOMContenLoaded事件触发后)

说完加载模式，从优化角度我们在开发过程会经常把script标签放入body闭合标签之前，这样可以相对保证DOM元素快速加载解析，不会阻塞页面渲染。缺点是如果HTML很多解析脚本比较费事，然后才会请求对应的脚本资源，不过通常来讲HTML内容比较简单差别不大除非你网卡

默认加载、异步加载、延时加载