js脚本延迟加载

为什么需要延迟加载js，这样做有什么好处？

所谓的延迟加载就是等页面加载完成之后，再加载js文件。这样做能提升页面的加载速度

具体方法有以下几种

• defer 属性：在给script标签添加defer属性，可以实现让脚本的加载与文档的解析同步解析，然后在文档解析完成之后再执行这个脚本文件，这样能避免页面的渲染阻塞。如果多个script标签都设置了defer属性，按照规范来说是顺序执行，但是在一些浏览器中可能不是这样的
• async 属性：一旦script标签添加上这个属性，js代码就能实现异步加载，不会阻塞页面的解析过程，但是当脚本加载完成之后立即执行js脚本，这个时候文档还没有解析完成，同样也会造成阻塞，多个async属性的脚本执行顺序是不可以预测的，一般不会按照代码的顺序依次执行
• 动态创建DOM方式：动态创建DOM标签的方式，这样可以对文档的加载事件进行监听，可以让文档加载完成之后再动态的创建script标签来引入js脚本
• 使用setTimeout：可以设置一个定时器来延迟加载js脚本文件
• 让js最后加载：将js脚本放在文档的底部，尽可能的使js脚本最后加载执行