文档章节

谈谈<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
博文 18
码字总数 6439
作品 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
异步加载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
二、在HTML中使用JavaScript

作者:汪娇娇 时间:2017年11月4日 一、<script>标签 1、标签的位置 </body>之前 2、延迟脚本 defer 3、异步脚本 async 4、defer 和async 的区别 defer属性可以让脚本在文档完全呈现之后再执...

娇娇jojojo
2017/11/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

这些Spring中的设计模式,你都知道吗?

设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆。 Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行...

Java填坑之路
26分钟前
1
0
Spring Aop原理之Advisor过滤

在上文(Spring Aop之Advisor解析)中我们讲到,Spring Aop对目标bean的代理主要分为三个步骤:获取所有的Advisor,过滤当前bean可应用的Advisor和使用Advisor为当前bean生成代理对象,并且上文...

爱宝贝丶
37分钟前
0
0
JMockit学习教程

1 JMockit中文网 我觉得如果仅仅是开发自测的话,把JMockit中文网认真看一遍,就可以在项目中使用JMockit了。 http://jmockit.cn/index.htm 2 JMockit中文教程 官方文档中文版。对于不喜欢看...

SuperHeroes
48分钟前
0
0
Linux服务器几乎从不采用Arch Linux?

我们见得多的Linux服务器系统一般都是什么Ubuntu Server啊,什么Cent OS啊,什么Fedora啊,或者企业采用的Red Hat啊,为什么几乎没有Arch Linux呢?下面我将从若干个方面指出Arch Linux在服务...

linux-tao
今天
0
0
js 函数柯里化 闭包

参考 https://mp.weixin.qq.com/s/GEHL3jarDdAAcr5tQGjmDg 一个统计求和的函数 需要知道整个数组的信息,然后遍历求值 function countMoney() { let money = 0 // 温馨提示:arguments...

阿豪boy
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部