javaScript基础面试题 -- 延迟加载JS有哪些方式？

回答：defer 与 async

js脚本放置在不同位置，对页面加载的不同影响

关于这个问题，首先来介绍一下，js脚本放置在不同位置，对页面加载有什么影响

①：先加载JS，再往后加载DOM
②：首先解析DOM，再解析JS脚本文件，一般都这样写，页面加载先出现结构，提高用户体验

如果JS脚本里面有，要获取#box元素，用②写法，因为如果#box还没解析出来，就开始用JS去获取，就会得到undefined

如果加上defer或者async就可以用①写法啦！
延迟加载JS的两个重要方法：

①：defer
②：async

defer与async的区别：

绿色：html的解析
灰色：html停止解析
紫色：JS下载
红色：JS执行

---

正常渲染过程：
1、先html解析
2、遇到了js，下载js
3、html解析停止，js执行
4、js执行完毕，html解析

---

async解析过程：
1、下载js与html解析是并行的
2、下载完js就立刻执行
3、async的执行顺序是：谁先下载完，谁先执行（如果a.js依赖b.js，俩同时导入，就不能用async，因为此时顺序相当重要）

---

defer解析过程：
1、下载js过程与html解析过程同步进行（与async相同）
2、当html完全解析完毕，才执行js（与async不同）
3、defer是按照顺序执行的，不存在谁先下载谁先执行