script标签async、defer属性及其区别

2019-05-1155次阅读javascript

当浏览器加载页面时,它会开始将HTML文档解析为标记并构建DOM树。之后,它使用此DOM树来呈现页面。问题是,javaScript可以改变DOM树的构建方式。

例如,javaScript可以调用document.write()并在文档中写入一个开始注释标记。这将破坏JS脚本之后的整个DOM树(以及整个页面!)。这就是为什么浏览器在遇到JS脚本时会停止解析的原因 (防止文档跳转并避免执行额外的工作)。

这意味着在JS脚本下载并执行之前,其后面的内容都不可见。如果将JS脚本添加到<head>中,则在JS脚本执行完成之前,什么都看不到。

 

使用async异步和defer延迟属性

这些属性使浏览器知道JS脚本可以在后台下载,而不会中断文档解析。以下是它们的工作原理:

  • async要求浏览器异步加载脚本(在后台)并在下载脚本时继续解析文档。(如果脚本在解析结束之前加载,解析将暂停;但由于加载通常比解析需要更多时间,因此很少发生这种情况。)
  • defer告诉浏览器异步下载脚本并仅在解析文档后执行它。


async异步和defer延迟属性的区别

  • async脚本会在下载后立即执行,而不保持顺序。这意味着如果有一个异步React bundle包和异步app bundle应用程序包,并且React bundle包更大,则app bundle应用程序将比React更早下载并执行(发生js依赖错误并中断执行)。
  • 与async不同,defer只有在下载完所有脚本后才能以正确的顺序执行。因此,在优化大型复杂应用程序时,defer延迟可能比async异步更安全。
上一篇: uglifyjs-webpack-plugin压缩配置防止删除对象属性引号  下一篇: 提高Web性能之预加载5种不同的方法  

script标签async、defer属性及其区别相关文章