script中的defer和async你了解过吗

前言

我们在写html的时候基本会碰到以下三种script标签,这三种script有什么区别你知道吗?

  • <script src='xxx'></script>
  • <script src='xxx' async></script>
  • <script src='xxx' defer></script>

script

浏览器在解析HTML的时候,如果遇到一个没有任何属性的script标签,就会暂停解析,先发送网络请求获取该JS的代码内容,然后让JS执行该代码,当代码执行完毕后再接着解析HTML

也就是说script阻塞了浏览器对HTML的解析,如果获取JS的网络请求没有得到回应,或者JS执行时间过长,都会导致页面的长时间白屏,让用户看不到页面。

async script

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

所以async是不可控的,因为JS的执行时间不确定,所以如果想要在一个异步JS脚本中获取某个DOM元素,有可能获取到也有可能获取不到。而且如果存在多个 async 的时候,它们之间的执行顺序也不确定,完全依赖于网络传输结果,谁先到执行谁。 这就会导致如果我们导入的第二个JS依靠第一个JS执行,那么第二个JS的执行就有可能出现问题

defer script

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

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

总结

  • <script src='xxx'></script>:常规的script标签会阻塞浏览器的解析,直到脚本加载并执行完毕。

  • <script src='xxx' async></script>:带有async属性的script标签会异步加载脚本,加载完成后会立即执行,可能阻塞,也可能不阻塞文档解析,执行时机不确定。

  • <script src='xxx' defer></script>:带有defer属性的script标签也是异步加载脚本,但会在文档解析完成后、DOMContentLoaded事件触发前执行,多个defer script会按照顺序执行,并且不会破坏脚本之间的依赖关系。

相关推荐
冰暮流星1 小时前
css之线性渐变
前端·css
徐同保1 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
mapbar_front1 小时前
大厂精英为何在中小公司水土不服?
前端
生莫甲鲁浪戴2 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
2501_916008894 小时前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
SkylerHu5 小时前
前端代码规范:husky+ lint-staged+pre-commit
前端·代码规范
菜鸟una5 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
牛客企业服务5 小时前
企业招聘新趋势:「AI面试」如何破解在线作弊难题?
人工智能·面试·职场和发展·招聘·ai招聘
Yeats_Liao5 小时前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone
飞翔的佩奇5 小时前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统