首页 > 其他分享 >script标签中defer和async的区别

script标签中defer和async的区别

时间:2024-04-11 14:30:39浏览次数:22  
标签:脚本 defer script js async 执行 加载

如果没有defer或async属性,浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载。

js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。

defer 和 async属性都是去异步加载外部的JS脚本文件,它们都不会阻塞页面的解析,其区别如下:

  • 执行顺序: 多个带async属性的标签,不能保证加载的顺序;多个带defer属性的标签,按照加载顺序执行;

  • 脚本是否并行执行:*async属性,表示*后续文档的加载和执行与js脚本的加载和执行是并行进行的,即异步执行;defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本需要等到文档所有元素解析完成之后才执行,DOMContentLoaded事件触发执行之前。

标签:脚本,defer,script,js,async,执行,加载
From: https://blog.csdn.net/m0_59508634/article/details/137563451

相关文章

  • JavaScript Array方法汇总
    函数名定义返回值是否改变原数组是否生成新数组push向数组的末尾添加一个或多个元素返回新的数组长度是否pop删除并返回数组的最后一个元素返回数组的最后一个元素是否unshift向数组的开头添加一个或多个元素返回新的数组长度是否shift删除数组的第一项返回第一个元素的值。若......
  • JavaScript String方法汇总
    方法名定义返回值是否改变原字符串是否生成新字符串charAt()查找指定位置的元素返回元素否否concat()连接两个或多个字符串返回连接后的字符串否是indexOf()indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回-1。返回查找到的......
  • 【华为OD】2024年华为OD机试C卷真题集:最新的真题集题库 C/C++/Java/python/JavaScript
    【华为OD】2024年C卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客华为OD机试2024年C卷真题题集题库,有2种分数的题目列表,分别是100分的列表、200分的列表需要订阅请看链接:C卷100......
  • Typescript 详细总结1
    基本数据类型类型注释:numberlet num:number=5//数字类型let str:string='str'//字符串类型let boolen:boolean =true//布尔 类型断言,确定类型后,不能赋其他类型值any类型let  anything:any='ssssss'let  anything:any=223any类型......
  • 深入浅出 妙用Javascript中apply、call、bind
    这篇文章实在是很难下笔,因为网上相关文章不胜枚举。巧合的是前些天看到阮老师的一篇文章的一句话:“对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来......
  • JavaScript处理异步循环的技术详解
    文章的更新路线:JavaScript基础知识-Vue2基础知识-Vue3基础知识-TypeScript基础知识-网络基础知识-浏览器基础知识-项目优化知识-项目实战经验-前端温习题(HTML基础知识和CSS基础知识已经更新完毕)正文使用async/await和Promise:优势:代码简洁,易读,适用于处理依赖关系较强......
  • 鸿蒙开发TypeScript语言:【简介与Hello World!】
    TypeScript教程TypeScript是JavaScript的一个超集,支持ECMAScript6标准([ES6教程])。TypeScript由微软开发的自由和开源的编程语言。TypeScript设计目标是开发大型应用,它可以编译成纯JavaScript,编译出来的JavaScript可以运行在任何浏览器上。语言特性TypeScript......
  • JavaScript 中的深度学习
    JS-PyTorch是一个JavaScript库,从头开始构建,以紧密跟随PyTorch的语法。它以一种文档完备、单元测试和可解释的方式实现,因此可以帮助其他JavaScript学习者进入机器学习!欢迎尝试Web演示!(本文视频讲解:java567.com)1.简介src/tensor.ts包含一个完全功能的张量(Tensor)对象,可以......
  • TypeScript 与组合式 API
    看吧:https://cn.vuejs.org/guide/typescript/composition-api.html为组件的props标注类型<scriptsetuplang="ts">constprops=defineProps({foo:{type:String,required:true},bar:Number})props.foo//stringprops.bar//number|undefine......
  • JavaScript实现文件大小转换、单位转换、toFixed、indexOf、substr、substring、B、KB
    constbytesToSize=(size)=>{if(size<0.1*1024){//小于0.1KB,则转化成Bsize=size.toFixed(2)+'B'}elseif(size<0.1*1024*1024){//小于0.1MB,则转化成KBsize=(size/1024).toFixed(2)+'KB'}else......