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. Jira内存调整

    java的metaspce怎么调大 元空间虚拟机控制元空间的增长.但是有些时候我们想限制其增长,比如通过显式在命令行中设置-XX:MaxMetaspaceSize.默认情况下,-XX:MaxMetas ...

  2. 19年最新 Python0基础学习书籍推荐（内涵PDF地址以及书籍源码）

    去年看过一篇文章,是关于18年的最适合0基础学习的书籍,今年,最新的书籍也已经统计出来.书籍的PDF太过于难找,所以很多PDF都找不到. 仅仅只能找到英文版PDF 本文章统计了18.19并做过对比,在 ...

  3. idea2019开发第一个java程序HelloWorld

    用idea2019开发第一个java程序: (idea破解不在本讲义范围之内) 新手建议忽略此部分,先把eclipse用熟.技术是一样的.idea缺省配置是黑色的,很晃眼,可以(Files/setti ...

  4. EXIT(外部中断)控制实验

    实验目的 设计使用外接的按键来作为触发源,使得控制器产生中断,并在中断服务函数中实现控制小灯的亮灭. 按键硬件点路 编程要点 初始化用来产生中断的 GPIO: 初始化 EXTI: 配置 NVIC: 编 ...

  5. go 结构体定义和结构体指针

    结构体一个结构体(`struct`)就是一个字段的集合. 将来要使用它向java .C# 中的class 有相同的地位 struct 可以用来值传递 同时可以通过引用传递参数(地址) java C# ...

  6. JS 03事件

    <script type="text/javascript"> function getUserInput() { //获取用户输入的内容 var val = docu ...

  7. PAT-1015 Reversible Primes (20 分) 进制转换+质数

    A reversible prime in any number system is a prime whose "reverse" in that number system i ...

  8. eclipse怎样修改同名包(package)的显示样式、格式

    打开我们的项目,可以看到左侧的package看上去特别多,没有层级. 点击Package Explorer右上角的箭头图标. 可以看到“Flat(扁平)”,“Hierarchical(分层)”两个选项 ...

  9. Flash播放控件属性详解

    Flash 播放控件属性详解 一.属性篇 1.AlignMode(读写)  语法:AlignMode As Long  说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...

  10. 【原创】大叔经验分享（84）spark sql中设置hive.exec.max.dynamic.partitions无效

    spark 2.4 spark sql中执行 set hive.exec.max.dynamic.partitions=10000; 后再执行sql依然会报错: org.apache.hadoop.h ...