首页 > 其他分享 >script 标签中的defer 和 async 属性

script 标签中的defer 和 async 属性

时间:2022-12-11 16:12:44浏览次数:72  
标签:defer script JS HTML async 解析

浏览器在解析 HTML 的时候,如果遇到一个没有任何属性的 <script> 标签 ,就会暂停解析,先发送网络请求获取该 JS 脚本的代码内容,然后让 JS 引擎执行该代码,当代码执行完毕后恢复解析。整个过程如下图所示:

可以看到,script 阻塞了浏览器对 HTML 的解析,如果获取 JS 脚本的网络请求迟迟得不到响应,或者 JS 脚本执行时间过长,都会导致白屏,用户看不到页面内容。

解决方式如下:

defer 和 async 都是 异步 加载 外部 的JS脚本文件,都不会阻塞页面的解析,因此用户可在脚本加载前看到页面内容。

1 async 

async 表示异步。当浏览器遇到带有 async 属性的 script 时,请求该脚本的网络请求是异步的,不会阻塞浏览器解析 HTML,一旦网络请求回来之后,如果此时 HTML 还没有解析完,浏览器会暂停解析,先让 JS 引擎执行代码,执行完毕后再进行解析。

图示如下: 

当然,如果在 JS 脚本请求回来之前,HTML 已经解析完毕了,那就啥事没有,立即执行 JS 代码,如下图所示:

所以 async 是不可控的,因为执行时间不确定,你如果在异步 JS 脚本中获取某个 DOM 元素,有可能获取到也有可能获取不到。而且如果存在多个 async 的时候,它们之间的执行顺序也不确定,完全依赖于网络传输结果,谁先到执行谁。

2 defer

defer 表示延迟。当浏览器遇到带有 defer 属性的 script 时,获取该脚本的网络请求也是异步的,不会阻塞浏览器解析 HTML,一旦网络请求回来之后,如果此时 HTML 还没有解析完,浏览器不会暂停解析并执行 JS 代码,而是等待 HTML 解析完毕再执行 JS 代码。

图示如下:

如果存在多个 defer script 标签,浏览器(IE9及以下除外)会保证它们按照在 HTML 中出现的顺序执行,不会破坏 JS 脚本之间的依赖关系。

最后,根据上面的分析,不同类型 script 的执行顺序及其是否阻塞解析 HTML 总结如下:

 

  • async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

  • defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

(1)defer 是不会阻塞html解析的,它是等DOM加载完之后再去执行JavaScript代码;async是JavaScript下载完成,就会立即执行代码,等待执行完之后才继续解析HTML。
(2)在加载多个JS脚本的时候,async是无顺序的加载,而defer是有顺序的加载。

标签:defer,script,JS,HTML,async,解析
From: https://www.cnblogs.com/ygunoil/p/16973806.html

相关文章

  • PowerScript语法参考手册结构和对象分册
    前言:本文用于PowerBuilder程序员,PowerBuilder最初由Sybase发布,能快捷开发C/S程序或者多层应用系统。SAP以58亿美元现金收购Sybase,PowerBuilder12.6是SAP收购Sybase后与2014......
  • AppleScript发送邮件
    实现效果弹出对话框,输入收件人。弹出对话框,输入收件人邮箱。点击确认,发送邮件。代码--弹出对话框,输入收件人setnameDialogtodisplaydialog"请输入收件人:"de......
  • javascript-代码随想录训练营day25
    216.组合总和Ⅲ题目链接:https://leetcode.cn/problems/combination-sum-iii/题目描述:找出所有相加之和为n的k个数的组合,且满足下列条件:只使用数字1到9每个数字......
  • JavaScript奇淫技巧:隐写术
    JavaScript奇淫技巧:隐写术本文将用JavaScript实现“图片隐写术”。什么是隐写术?将文本或其它数据写入图片的技术,称为“隐写术”。比如下面这张图中,便隐藏着秘密信息,虽然看起......
  • [Typescript] 133. Medium - All
    Returnstrueifallelementsofthelistareequaltothesecondparameterpassedin,falseifthereareanymismatches.ForexampletypeTest1=[1,1,1]ty......
  • Go-14 Golang语言中 函数详解之defer延迟处理函数和return的结合使用
    packagemain//defer延迟处理函数和return的结合运用/* 按照下面的示例作了一个总结,文字结合下面的代码更容易理解 总结一下规则: defer里面的变量必须与函数定义的......
  • JavaScript:this指针
    this指针,存储的是一个内存地址,如同变量一样,指向一块内存区域;而这个内存区域,保存的就是一个对象的数据,那么这个对象是什么呢?通常来说,this指针,主要是用在方法(函数)中,用来指......
  • 深入解析 JavaScript 中 apply 方法原理
    前言大家好,我是 CoderBin,在面试当中,手撕代码的场景屡见不鲜,手写JS当中的方法更是最常见的一种,所以本文将全面的,详细解析​​apply​​方法的实现原理,并手写出自己的​​a......
  • 前端开发系列023-基础篇之JavaScript和JSON(扩展)
    title:'前端开发系列023-基础篇之JavaScript和JSON(扩展)'tags:-javaScript系列categories:[]date:2017-06-2008:20:13本文输出JSON搜索和JSON转换相关的内容......
  • 前端开发系列022-基础篇之JavaScript和JSON(进阶)
    title:'前端开发系列022-基础篇之JavaScript和JSON(进阶)'tags:-javaScript系列categories:[]date:2017-06-1908:20:13在[javaScript和JSON](http://wendingd......