• 周四. 4月 25th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

【javascript基础】 JavaScript defer和async区别

admin

11月 28, 2021

defer该属性用来通知浏览器,这段脚本代码将不会产生任何文档内容。例如 JavaScript代码中的document.write()方法将不会骑作用,浏览器遇到这样的代码将会忽略,并继续执行后面的代码。属性只能是 defer,与属性名相同。在HTML语法格式下,也允许不定义属性值,仅仅使用属性名。

async该属性为html5中新增的属性,它的作用是能够异步地下载和执行脚本,不因为加载脚本而阻塞页面的加载。一旦下载完毕就会立刻执行。

async和defer一样,都不会阻塞其他资源下载,所以不会影响页面的加载,但在async的情况下,js文档一旦下载完毕就会立刻执行,所以很有可能不是按照原本的顺序来执行,如果js有依赖性,就要注意了。

如下图:

defer和async的比较

相同点:    

  • 加载文件时不阻塞页面渲染;
  • 对于inline的script无效;
  • 使用这两个属性的脚本中不能调用document.write方法;
  • 有脚本的onload的事件回调;
  • 允许不定义属性值,仅仅使用属性名;

 不同点:

  •  html的版本html4.0中定义了defer;html5.0中定义了async;这将造成由于浏览器版本的不同而对其支持的程度不同;
  •  执行时刻:每一个async属性的脚本都在它下载结束之后立刻执行,同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱 的情况;每一个defer属性的脚本都是在页面解析完毕之后,按照原本的顺序执行,同时会在document的DOMContentLoaded之前执 行。

这两个属性会有三种可能的组合:

  • 如果async为true,那么脚本在下载完成后异步执行。
  • 如果async为false,defer为true,那么脚本会在页面解析完毕之后执行。
  • 如果async和defer都为false,那么脚本会在页面解析中,停止页面解析,立刻下载并且执行。

相关阅读:script的defer属性

        script的async属性

《【javascript基础】 JavaScript defer和async区别》有一个想法
  1. Wow, fantastic blog layout! How lengthy have you
    been blogging for? you made blogging look easy. The total look of your site is great, as well as the content!

    You can see similar here dobry sklep

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注