延迟JS加载的方法

  一般项目中会把JS放在DOM之后,body之前,这样做即使JS出现了错误,也不会影响DOM的渲染.

  若把js放在了DOM之前,

此时我们用 console.log(document.getElementById('box'))去获取DOM中的元素是获取不到的.

为了解决这种问题,我们可以再js的引入中加上async和defer两个关键字,来让js的加载延迟.

defer和async的区别:在讲两者区别之前我们先了解一下浏览器的解析方式

分为四个部分HTML的解析,HTML的解析暂停,JS的下载,和JS的执行.

当我们用传统方法引入JS的时候HTML和JS的过程如下.

使用async时:

使用defer时:

defer:等html全部解析完才会执行JS的代码,顺次执行JS脚本.

async:谁先加载完就先执行谁