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. 最新 东方财富java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.东方财富等10家互联网公司的校招Offer,因为某些自身原因最终选择了东方财富.6.7月主要是做系统复习.项目复盘.Leet ...

  2. jira使用一：如何给项目分组、sprint并行、禁止发送消息给atlassian

    问题一:如何设置多个sprint并行? 问题二: 如何分组显示 设置泳道,并快速过滤 问题3:添加所属产品? 管理员登录Jira后台设置-问题-自定义字段找到:所属产品,进入 配置 界面在配置界面中, ...

  3. ruby tk实现简易计算器

    #encding:GBK require 'tk' module Const WIDTH_OF_PANEL = 370 HEIGHT_OF_PANEL = 520 SIZE_OF_BUTTON_H = ...

  4. SrpingBoot入门到入坟01-HelloWorld和SpringBoot打Jar包

    第一个SpringBoot: 建立一个maven项目: 再pom.xml里面增加依赖: <?xml version="1.0" encoding="UTF-8&qu ...

  5. java之理解面向对象

    1.程序设计的三种基本结构 顺序结构 顺序结构表示程序中的各操作是按照它们在源代码中的排列顺序依次执行的 选择结构 选择结构表示程序的处理需要根据某个特定的条件选择其中的一个分支执行.选择结构有单选择 ...

  6. PAT-1003 Emergency (25 分) 最短路最大点权+求相同cost最短路的数量

    As an emergency rescue team leader of a city, you are given a special map of your country. The map s ...

  7. Centos7安装gitlab11 学习笔记之备份恢复及邮箱配置

    一.备份 修改配置文件 vim /etc/gitlab/gitlab.rb 默认路径为 # gitlab_rails['backup_path'] = "/var/opt/gitlab/ba ...

  8. 总结一下C++与C#之间的区别

    1,C#不支持多重继承 2.在标准的C#安全代码中不支持指针类型的操作,然而,你却能在微软所谓的“非安全代码”中操作指针类型对象. 3.C#中所有对象都只能通过关键词“new”来创建,C++的“类名_ ...

  9. （一）Maven基础及第一个Maven工程

    一.Maven介绍 ANT/Maven/gradle是一个项目管理工具,它包含了一项目对象模型(Project Object Model),一组标准集合,一个项目生命周期(Project Lifecy ...

  10. 通过SQL Server的扩展事件来跟踪SQL语句在运行时，时间都消耗到哪儿了？

    原文:通过SQL Server的扩展事件来跟踪SQL语句在运行时,时间都消耗到哪儿了? 问题就是,一个很简单的语句,在不同的服务器上执行,所需要的时间相差很大,特别提到在性能差的服务器上反而快,在性能 ...