延迟加载就是等页面加载完成之后再加载javascript文件。
js延迟加载有助于提高页面加载速度。
一般有以下几种方式:
defer属性:给js脚本添加defer属性,这个属性会让脚本的加载与稳定的解析同步解析,然后在文档解析完成后再执行这个脚本文件,这样的话就能使页面的渲染不被阻塞。多个设置了defer属性的脚本按规范来说是最后顺序执行的,但是在一些浏览器中可能不是这样。
async属性:给js脚本添加async属性,这个属性会使脚本异步加载,不会阻塞页面的解析过程,但是当脚本加载完成后立即执行js脚本,这个时候如果文档没有解析完成的话同样会阻塞。多个saync属性的脚本的执行顺序是不可预测的,一般不会按照代码啊的顺序依次执行。
动态创建DOM方式,动态创建DOM标签的方式,可以对文档的加载事件进行监听,当文档加载完成后再动态的创建script标签来引入js脚本。
使用setTimeout延迟方法:设置一个定时器来延迟加载js脚本文件。
让js最后加载:将js脚本放在文档的底部,来使js脚本尽可能的在最后来加载执行。