博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
script标签中的async和defer
阅读量:6594 次
发布时间:2019-06-24

本文共 663 字,大约阅读时间需要 2 分钟。

  在程序中代码是一行一行执行的,html标签都是由渲染引擎来执行,代码执行时从上往下一行一行执行,当执行到alert(如下图),alert会阻塞后面代码的执行,当点击完确定之后,代码继续往下执行。

  javascript的内容同样可在外部进行引用,如下图所示,正常情况下执行结果和上面的内容相同,但当我们给html的script标签中加入async或者defer属性时,代码的执行过程也将会随之改变。

  async 为异步,顾名思义就是多个人同时做多件事,这里区分sync,sync为同步,就是一个人有序的做多件事情。因此在script标签中加入async属性后,程序执行时,外部引用的js文件内容和html中的代码同时进行。在这里需要注意,因为代码的执行速度不同,显示的效果有可能不同,在此是js内容被下载完成后立即执行。

  defer也会异步的下载去执行js内容,当然script标签中不会有两个相同功能的属性,它和async的区别是什么呢?defer和async的区别就是defer下载完js的内容后不会立即执行,直到html文档加载解析完成后才执行,下图就是使用defer的过程,代码虽然简单,但是这样可以清晰的表达defer的作用。

总结:前端项目中肯定少不了多多少少的js文件,defer和async就给我们在程序执行过程中提供了很方便的引用,更方便我们维护代码,避免代码中这一个那一个的js引用。

转载于:https://www.cnblogs.com/Codegenius/p/5835635.html

你可能感兴趣的文章
深入理解Java内存模型(五)——锁
查看>>
Chalubo僵尸网络来袭 IOT设备或将受到DDoS攻击
查看>>
如何实现百万TPS?详解JMQ4的存储设计
查看>>
这么说吧,NIO很简单,其实就是个牛逼IO
查看>>
使用Python快速获取公众号文章定制电子书(二)
查看>>
iOS下JS与OC互相调用(七)--Cordova 基础
查看>>
Three.js 关于立方体贴图产生边缘锯齿问题
查看>>
Nacos v0.7.0:对接CMDB,实现基于标签的服务发现能力
查看>>
【开发问题记录①】关于滑动CollectionView时ContentSize变化的问题
查看>>
java中GC的基本概念
查看>>
building xxx gradle project info的解决办法
查看>>
在 CentOS 7 上搭建 Jenkins + Maven + Git 持续集成环境
查看>>
数据结构与算法 | Leetcode 19. Remove Nth Node From End of List
查看>>
[LeetCode] 862. Shortest Subarray with Sum at Least K
查看>>
【分享】终端命令工具 自动生成vue组件文件以及修改router.js
查看>>
[LeetCode] Student Attendance Record I
查看>>
PHP回顾之多进程编程
查看>>
spring boot + redis
查看>>
Ajax技术细节
查看>>
nuxt.js部署vue应用到服务端过程
查看>>