Script标签是我们常用的引用js脚本的一种方式。

撸代码的时候，我们常常只写src属性，直接忽略其他属性。

最近发现了2个可以利用的属性：async、defer。

顾名思义async就是异步，在不影响其他资源加载的同时，异步加载这个文件；defer就是延迟加载。

下面是高三上的解释：

Async: 可选属性。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效（写在html文件中的js代码，添加此属性无效，仍按代码加载顺序执行）。
Defer: 可选属性。标识脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。

是否真的如上所述，下面我们用个demo来验证一下。

Html代码：

进入的js文件中，同文件序号分别console.log,1,2,3,4,5,6；

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>test1 test2</h1>

</body>

<script defer>

　　console.log(0)

</script>

<script src='js1.js'></script>

<script src='js2.js'></script>

<script src='js3.js'></script>

<script src='js4.js'></script>

<script src='js5.js'></script>

<script src='js6.js'></script>

</html>

在浏览器中打开这个html文件，我们可以看到6个js文件按照顺序加载。

    

Ok.现在我给js1文件加上defer属性，看看。

<script defer src='js1.js'></script>

实验证明：

js文件依然按照书写顺序加载。

但是在控制台可以看到，js1文件的代码是最后执行的

   

那我们还原代码，给js6文件加上async属性试试，看看会不会第一个输出6

<script async src='js6.js'></script>

很遗憾，实时并没有按照预想的那样输出6，0，1，2，3，4，5

如上图代码还是按照顺序执行了，为什么defer生效了，async没生效呢？

我们换个文件试试，给中间位置的某个文件添加async属性。我给js3加了async属性后，代码执行顺序发生了如下变化：

那么问题又来了，为什么不是想象中的那个顺序：3,0,1,2,4,5,6

下面我们来分析一下原因

1，为什么async属性加到最后一个script标签中无效？

2，为什么添加了async属性的代码不是优先执行的？

我们都知道，js是按照书写顺序加载，按照书写顺序执行的。文件加载之后，程序便开始解析文件中的代码。

因此添加了async属性的文件，需要加载到这个文件位置的时候才会生效，js6已经是最后一个文件了，最后一个加载的文件中的代码自然就最后执行，因此看起来async在我们的第一个demo中没有生效。

Async是异步加载，而不是优先加载，因此js3文件添加了async属性后，当文件加载到js3,同时开始加载js3之后的文件，于是便出现了上图0,1,2,4,3,5,6的结果，当然这个结果不是必然的，因为我们的demo里面的代码非常简短，如果js4中的代码逻辑复杂，那么结果可能任然是0,1,2,3,4,5,6。

说到这里，大家明白async和defer的原理了吗？

那么什么场景下可以用到这些属性呢？

比如有些第三方库，要求在header中引入（这就意味着第三方插件库会优先加载），但是我们并不需要在页面加载之初就用到这个插件。那么我们可以加上defer属性使之最后加载。同理，如果页面加载的同时需要用到第三方插件，那么我们引用的时候可以加async属性，这样网站内的资源就可以与插件资源异步加载。这中方法会给网站其他资源的加载节省出一些时间，不失为一种页面优化的方法。

参考资料：

JavaScript高级程序设计（第3版）

script标签中的async、defer属性的更多相关文章

  1. 浅谈script标签中的async和defer

    script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了.直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染 ...

  2. script标签加载顺序(defer & async)

    script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...

  3. 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面

    script标签, 即 html中的 js脚本区域中: 它其实就是一个 普通的 html标签, 在 html 渲染器 parser 看来, 它跟其他任何的普通 的 html标签 , 比如 p 标签, ...

  4. HTML5 script 标签的 crossorigin 和integrity属性的作用

    Bootstrap 4 依赖的基础库中出现了两个新的属性 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.m ...

  5. script标签中type为"text/x-template"或"text/html"

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

  6. script标签中type为<script type="text/x-template">是个啥

    写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况,一般的写法都是使用+号以字符串的形式拼接,如果是短点的还好,如果很长很长的话就会拼接到令人崩溃了. 比如 ...

  7. javaScript中的小细节-script标签中的预解析

    首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数( ...

  8. 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量?

    <!DOCTYPE html> <!-- 为什么不能在 body 标签的前面的 script 标签中定义 JS 全局变量? 在全局环境下的代码就是在页面加载阶段从上到下一边加载一边执 ...

  9. script标签中defer和async属性的区别

    这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...

随机推荐

  1. 谷歌插件:右键搜使用指南.md

    基本功能看插件,说几个自定义搜索的实现 自定义技巧:%s选择的文字或页面或链接,%g转换成GBK字符集,%t转换成BIG5字符集,%p剪贴板内容,%u当前页面域名. 注:这部分内容来自谷歌插件介绍.使 ...

  2. Haystack--基于Django的全文检索框架

    好文章转载自:https://suguangti.cnblogs.com/p/11167097.html 阅读目录 1.什么是Haystack 2.安装 3.配置 4.处理数据 创建索引 5.设置视图 ...

  3. python 列表推导式 - python基础入门(16)

    截止到目前为止,python基础内容已经学习了50%左右,在学习编程过程中,我们不仅要学习python语法,同时也需要学习如何把自己代码写的更美观,效率更高. 一.什么是推导式 推导式是从一个或者多个 ...

  4. ubuntu的sudo免密

    ubuntu的sudo免密与centos大同小异,都是在/etc/sudoers中添加用户信息,添加的内容也一样,只是位置不一样. centos的位置如下: 而ubuntu的位置如下: 除此之外,两行 ...

  5. SpringBoot中使用 RabbitMQ -测试

    本章主要建立在已经安装好Erlang以及RabbitMQ的基础上,接下来,简单介绍一下使用 1.首先到RabbitMQ的管理界面新建一个队列(Direct模式) 2.测试项目的基础结构如下: 这里为了 ...

  6. XML基础知识归纳（通俗易懂）

    XML:可扩展标记型语言 随着json等一些技术的普及,似乎xml的路子越来越窄,虽然xml的一些功能被其他的一些技术代替,但是学习xml还是非常有必要,如果用xml存储一些大量数据,还是有一定优势的 ...

  7. 剑指offer58：对称的二叉树。判断一颗二叉树是不是对称的，如果一个二叉树同此二叉树的镜像是同样的，定义其为对称的

    1 题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 2 思路和方法 定义一种遍历算法,先遍历右子结点再遍历左子结点:如对称先序 ...

  8. 笔记-4：mysql数据查询

    1.创建查询表 1.1 创建班级表 含义 字段名 数据类型 宽度 班级编号 classNo 字符型 6 班级名称 className 字符型 20 所属院系 department 字符型 30 年级 ...

  9. python读写文件的操作

    编程语言中,我们经常会和文件和文件夹打交道,这篇文章主要讲的是Python中,读写文件的常用操作: 一.打开文件 openFile = open('../Files/exampleFile.txt', ...

  10. SAS学习笔记18 length、lengthn、lengthc函数