script标签默认是同步加载的,也就是说,当读到script标签是引入外部js文件的,会立即停止对页面的向下解析,然后下载脚本并且执行,如果说js文件相对来说比较大,而且网速什么的又不是很好,那么用户在浏览网页的时候,会有很长一段时间的等待,用户体验很差。
当js文件里面没有对DOM进行操作或者对css进行操作的时候,我们可以将这个js文件设置成异步加载的,这样子会让用户体验更好。
那么如何设置js文件的异步加载呢?
有两种方式:
<script defer>
<script async>
这两种方式的区别就是:
defer是在对页面解析的同时下载js文件,但是要等页面解析完,才开始执行js文件。
async是在对页面解析的同时,下载js文件,一旦有下载完了,就先停止对页面的解析,执行下载完的那个js文件,当有多个js文件使用async的时候,不能保证执行顺序。