文档章节

谈谈<script>链接属性的defer async 区别

r00txx
 r00txx
发布于 2016/06/22 15:10
字数 2
阅读 364
收藏 24

有时候我们加载JS文件, 尤其是外链JS文件的时候,当文件加载过慢,或者文件加载出错的时候,有可能会阻塞整个页面的加载, 这时我们需要JS的异步加载, 有两个属性可支持异步加载

defer     async

用法为:

 <script type="text/javascript" async src="xxx.js"></script> 

<script type="text/javascript" defer src="xxx.js"></script>

 

defer 和 async 的共同点是 都是可以并行加载JS文件,不会阻塞页面的加载, 不同点是 defer的加载完成之后, JS会等待整个页面全部加载完成了再执行, 而async是加载完成之后,会马上执行JS, 所以假如对JS的执行有严格顺序的话,那么建议用 defer加载。

 

以上两个属性有一种异常情况, 假如当要加载的 JS 有如下的代码逻辑:

document.write('xxxxx'); window.location='xxxx';

那么有可能会导致页面的一片空白,要谨慎使用

© 著作权归作者所有

共有 人打赏支持
r00txx
粉丝 0
博文 20
码字总数 7588
作品 0
广州
架构师
加载中

评论(3)

os790858223
os790858223
一二一
os790858223
os790858223

引用来自“Qiujuer”的评论

还不错的。

嗯嗯
Qiujuer
Qiujuer
还不错的。
Javascript 异步加载详解

一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后...

Carl_
2014/09/15
0
0
Javascript 异步加载详解

一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后...

张悟空
2014/08/18
0
0
异步加载script,提高前端性能(defer和async属性的区别)

一、异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割、按需加载等方式优化性能。异步加载script也是一种前端优化的手段。 就好比如果我的页面其中一个功能需要打开地图,但是地...

xiaobe
08/22
0
0
异步加载JS的4种方式(详解)

方案1:$(document).ready 点评: 1、需要引用jquery 2、兼容所有浏览器。 方案2: 点评: 1、HTML5

老朱教授
2017/09/03
0
0
在HTML中使用JavaScript(浏览器对js的加载机制分析)

前言:   向HTML页面中插入JavaScrip的主要方法,就是使用

damon风
03/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Cointext在阿根廷和土耳其推出比特币现金短信钱包

Cointext于10月15日开始在土耳其和阿根廷提供新的基于SMS的比特币现金钱包服务,这两个国家的加密货币使用量急剧上升,以应对严峻的经济形势。 移动钱包 通过短信处理BCH交易 “比特币是更好...

lpy411
6分钟前
0
0
大数据早课-0918

9.18日早课 1.全局搜索含有abc的文件名称或文件夹的命令 2.当前目录一般用什么表示 3.切换到上一次和上一层命令分别是什么 4.pwd是查看当前目录的什么 5.隐藏文件或文件夹的标识是什么? 怎样...

hnairdb
7分钟前
0
0
mybatis学习笔记一

一、mybaits需要的项目依赖 <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis --> <dependency> <groupId>org.mybatis</groupId> <artif......

wuyiyi
8分钟前
0
0
CentOS6 安装 GraphicsMagick

1.安装相关依赖: yum install -y gcc libpng libjpeg libpng-devel libjpeg-devel ghostscript libtiff libtiff-devel freetype freetype-devel 2.下载并解压到目录/usr/local/ wget ft......

凯文加内特
9分钟前
0
0
RabbitMq集群使用Nginx做负载均衡

1.配置rabbitmq集群(可以参考前一篇RabbitMq之部署集群) 2.Nginx做负载均衡 注意:Nginx1.90版本后 新增了stream 模块用于一般的 TCP 代理和负载均衡,之前版本不支持 修改Nginx配置文件ngi...

zhaochaochao
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部