script标签中的async与defer属性

为什么要用async和defer(作用)

同步在javaScript里面是一个很重要的概念,因为当浏览器记载HTML的时候,一旦遇到了script标签,就会停下来先把script标签里面的内容给执行掉。

如果script标签里面有外部文件,那就必须等待下载和执行的步骤,这样浏览器才会继续往下加载;如果外部文件刚好是在一个网络情况比较差的服务器上,这样整个网页的加载都会受到很大的影响,这就是同步带来的阻塞弊端。async和defer都是可以解决整个问题的。

async

<script type="text/javascript" src="example.js" async="async"></script>

如果我们使用async,那就是异步执行:浏览器在加载页面的时候,如果遇到了async属性,浏览器就会立即进行下载,与此同时继续加载页面,这样就解决了阻塞的问题。

虽然没有阻塞的情况,但是async下的脚本具体什么时候执行就说不定了,有时页面还没加载完就执行了,也有可能页面加载后才会执行。因为这种不确定性,因为脚本是需要修改DOM的,那么DOM 还没有加载好,脚本就进行操作,会造成错误。因此async比较适合一些第三方的脚本。

defer

<script type="text/javascript" src="example.js" defer="defer"></script>

浏览器在加载页面的时候,如果遇到了defer属性,浏览器就会立即进行下载,与此同时继续加载页面但是不管脚本是否下载完了,都会等到浏览器解析完HTML以后再执行脚本。因此defer比较适合与DOM有关联的脚本

注:不管是async还是defer,两者都只适用于外部脚本,而且还要注意兼容性的问题

        如果浏览器不能识别这两个属性,那还是把script内容放在页面底部比较好

总结:都用于外部脚本

        async异步下载完立即执行

        defer异步下载完等dom加载完成后执行

        兼容性问题script标签放最底下

猜你喜欢

转载自blog.csdn.net/lwx33912138/article/details/128111149