defer和async的原理与区别

上一篇刚转载了一篇有关于网站性能优化的文章,其中提及到了页面的加载和渲染的过程,提到了defer和async的相关区别,但是本人在此之前并没有深究其中的区别。

defer和async是script标签的两个属性,用于在不阻塞页面文档解析的前提下,控制脚本的下载和执行。
在介绍他们之前,我们有必要先了解一下页面的加载和渲染过程:

  1. 列表内容
  2. 浏览器通过HTTP协议请求服务器,获取HMTL文档并开始从上到下解析,构建DOM;
  3. 在构建DOM过程中,如果遇到外联的样式声明和脚本声明,则暂停文档解析,创建新的网络连接,并开始下载样式文件和脚本文件;
  4. 样式文件下载完成后,构建CSSDOM;脚本文件下载完成后,解释并执行,然后继续解析文档构建DOM
  5. 完成文档解析后,将DOM和CSSDOM进行关联和映射,最后将视图渲染到浏览器窗口

在这个过程中,脚本文件的下载和执行是与文档解析同步进行,也就是说,它会阻塞文档的解析,如果控制得不好,在用户体验上就会造成一定程度的影响。

所以我们需要清楚的了解和使用defer和async来控制外部脚本的执行。

先来简明概要的介绍一下下面三者的区别:

  1. <script src="script.js"></script>
    没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
  2. <script async src="script.js"></script>
    有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)
  3. <script defer src="myscript.js"></script>
    有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

接着,我们来看一张图:
这里写图片描述

蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

此图告诉我们以下几个要点:

  1. defer 和 async 在网络读取(下载)这块儿是一样的,都是异步的(相较于 HTML 解析)
  2. 它俩的差别在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的
  3. 关于 defer,此图未尽之处在于它是按照加载顺序执行脚本的,这一点要善加利用
  4. async 则是一个乱序执行的主,反正对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行
  5. 仔细想想,async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics

下面为了演示脚本的执行情况,借鉴了详解defer和async原理及应用


为了演示脚本的执行情况,进而介绍这两个属性的作用,我们先来搭建一个简单的服务器:
创建了一个简易的Node服务器server.js,其代码如下:

var http = require('http');
var fs = require('fs');var typeMapping = {'html': 'text/html','js'  : 'text/javascript','css' : 'text/css','ico' : 'image/x-icon'
};var getResourceExtension = function(req) {var url = req.url;var lastIndexOfDot = url.lastIndexOf('.');if (lastIndexOfDot === -1) return 'text/plain';return url.substring(lastIndexOfDot + 1);
};var respondResourceToClient = function(req, res) {//read the reource and respond via 'pipe'fs.createReadStream(req.url.replace(/^\//, '')).pipe(res);
};var server = http.createServer(function(req, res) {console.log('requesting url: ', req.url);var extension = getResourceExtension(req);res.writeHead(200, {'Content-Type': typeMapping[extension]});var delay = function(time) {setTimeout(function() {respondResourceToClient(req, res);}, time || 0);};if (extension === 'html' || extension === 'css') {delay(0);} else if (extension === 'js') {delay(1000);} else {res.end('');}
});server.listen(3000);console.log('listening at port 3000...');

从上面的代码我们可以看出,当服务器接收到请求之后,会判断请求资源是否为JS,如果是则延迟1s后返回对应的资源。
启动这个服务很简单,只需执行node server.js即可,然后就可以在浏览器中输入http://localhost:3000/app/index.html访问主页了
现在我们来看看index.html中的内容:

<!DOCTYPE html>
<html><head><title>defer & async</title><link rel="stylesheet" type="text/css" href="css/main.css"><script type="text/javascript" src="js/1.js"></script></head><body><div class="text">Hello World</div><script type="text/javascript" src="js/2.js"></script></body>
</html>

在这个HTML文档中,我们先在head中引用了一个外部的脚本文件js/1.js,然后在我们要显示的Hello World后面又引用了一个js/2.js,它们的内容都很简单,就是弹出对应的标示信息:

// js/1.js
alert(1);// js/2.js
alert(2);

下面我们就来访问主页,看看会发生些什么:
这里写图片描述

从图中可以看到,渲染的过程的确是自上而下,同步进行的,也就是说遇到外部的脚本,就得暂停文档的解析,下载并且解释执行,这种方式是阻塞的,会造成网页空白的现象。

现在稍微修改一下代码,将head中的script标签加上defer属性,然后也稍微改动一下两个JS文件:

<!DOCTYPE html>
<html><head><title>defer & async</title><link rel="stylesheet" type="text/css" href="css/main.css"><!-- adding a 'defer' attribute, by default, the value will be 'true' --><script type="text/javascript" src="js/1.js" defer></script></head><body><div class="text">Hello World</div><script type="text/javascript" src="js/2.js"></script></body>
</html>
// js/1.js
console.log(1);// js/2.js
console.log(2);

再次访问index.html,我们会在控制台中看到下面的执行顺序:
这里写图片描述

显而易见,1.js被延后致至文档解析完成后执行了,它的执行顺序比body中的

<!DOCTYPE html>
<html><head><title>defer & async</title><link rel="stylesheet" type="text/css" href="css/main.css"><!-- adding a 'defer' attribute, by default, the value will be 'true' --><script type="text/javascript" src="js/1.js" defer></script><script type="text/javascript" src="js/2.js" defer></script><script type="text/javascript" defer>console.log(3);</script></head><body><div class="text">Hello World</div><script type="text/javascript">document.addEventListener("DOMContentLoaded", function() {console.log('dom content loaded, ready state:', this.readyState);}, false);window.addEventListener('load', function() {console.log('window loaded, dom ready state:', document.readyState);}, false);</script></body>
</html>

这里写图片描述

可以看到,外联的脚本是按照声明顺序执行的,内联脚本并没有遵守这个规则,另外,DOMContentLoaded和load事件依次被捕获,DOM的状态分别变为interactive和complete

接下来我们介绍一下async属性,为了能够很好的演示执行顺序,我们还需要一些修改:

<!DOCTYPE html>
<html><head><title>defer & async</title><link rel="stylesheet" type="text/css" href="css/main.css"><!-- adding a 'async' attribute, by default, the value is 'true' as well --><script type="text/javascript" src="js/1.js" async></script><script type="text/javascript" src="js/2.js" async></script><script type="text/javascript" src="js/3.js" async></script></head><body><div class="text">Hello World</div></body>
</html>

JS文件内如下:

// js/1.js
console.log(1);// js/2.js
console.log(2);// js/3.js
console.log(3);

再次访问index.html,会发现控制台打印如下:
这里写图片描述

我们发现,3个脚本的执行是没有顺序的,我们也无法预测每个脚本的下载和执行的时间和顺序。async和defer一样,不会阻塞当前文档的解析,它会异步地下载脚本,但和defer不同的是,async会在脚本下载完成后立即执行,如果项目中脚本之间存在依赖关系,不推荐使用async。

关于async,也需要注意以下几点:
1. 只适用于外联脚本,这一点和defer一致
2. 如果有多个声明了async的脚本,其下载和执行也是异步的,不能确保彼此的先后顺序
3. async会在load事件之前执行,但并不能确保与DOMContentLoaded的执行先后顺序

以上就是defer和async的介绍,了解和掌握这两个属性的作用,不仅对JS代码执行的控制更加熟练,也会对页面渲染多一分了解。

参考文章:

  • http://blog.csdn.net/liuhe688/article/details/51247484
  • https://segmentfault.com/q/1010000000640869

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249660.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一些奇妙的线段树操作

学过数据结构和会做题完全是两个概念orz 各种各样的题目都应该见识一下 简单的目录&#xff1a; 最大连续长度 吉司机线段树 线段树合并/分裂 最大连续长度问题 典型题目&#xff1a;HDU 3911 &#xff08;$Black$ $And$ $White$&#xff09; 题目大意&#xff1a;有一个长度为…

微服务实践沙龙-上海站

微服务的概念最早由Martin Fowler与James Lewis于2014年共同提出&#xff0c;核心思想是围绕业务能力组织服务&#xff0c;各个微服务可被独立部署&#xff0c;服务间是松耦合的关系&#xff0c;以及数据和治理的去中心化管理。微服务能够帮助企业应对业务复杂、频繁更新以及团…

(四)RabbitMQ消息队列-服务详细配置与日常监控管理

&#xff08;四&#xff09;RabbitMQ消息队列-服务详细配置与日常监控管理 原文:&#xff08;四&#xff09;RabbitMQ消息队列-服务详细配置与日常监控管理RabbitMQ服务管理 启动服务&#xff1a;rabbitmq-server -detached【 /usr/local/rabbitmq/sbin/rabbitmq-server -deta…

前端开发工程化探讨--基础篇(长文)

转载自UC资深前端工程师张云龙的github 喂喂喂&#xff0c;那个切图的&#xff0c;把页面写好就发给研发工程师套模板吧。 你好&#xff0c;切图仔。 不知道你的团队如何定义前端开发&#xff0c;据我所知&#xff0c;时至今日仍然有很多团队会把前端开发归类为产品或者设计岗…

Python读取Json字典写入Excel表格的方法

需求&#xff1a; 因需要将一json文件中大量的信息填入一固定格式的Excel表格&#xff0c;单纯的复制粘贴肯定也能完成&#xff0c;但是想偷懒一下&#xff0c;于是借助Python解决问题。 环境&#xff1a; Windows7 Python2.7 Xlwt 具体分析&#xff1a; 原始文件为json列表&am…

Spring-BeanFactory源码分析

正式进入Spring 源码分析这个模块了&#xff0c;对于spring这个庞大的工程&#xff0c;如果要一点点的完全分析是非常困难的&#xff0c;对于应用型框架&#xff0c;我还是偏向于掌握思想或者设计&#xff0c;而不是记住代码&#xff0c;对于初次看spring源码&#xff0c;相信大…

我所知道的HTTP和HTTPS

摘要&#xff1a;相比之前的传输协议&#xff0c;HTTP/2在底层方面做了很多优化。有安全、省时、简化开发、更好的适应复杂页面、提供缓存利用率等优势&#xff0c;阿里云早在去年发布的CDN6.0服务就已正式支持HTTP/2&#xff0c;访问速度最高可提升68%。 写在前面 超文本传输…

Jenkins配置与使用

Jenkins是一个开源软件项目&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件的持续集成变成可能。Jenkins是基于Java开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;功能包括&#xff1a;1、持续的软件版本发布/测试项目。2、监控外部调用…

fastDFS使用

fastDFS : 分布式文件系统C语言开发,fastDFS为互联网量身定制,考虑到了冗余备份,负载均衡,线性扩容...很容易搭建集群文件存储系统.存储在fastDFS图片:相当于存储在本地磁盘一样访问图片:相当于访问本地磁盘存储结构:组名/虚拟磁盘路径/动态生成文件名.扩展名192.168.100.20/gr…

本地环境用eclipse搭建spring源码环境

对于JAVA和.NET开发人员来讲Spring框架并不陌生&#xff0c;对于想进行spring源码学习的同学来讲&#xff0c;在本地下载和构建spring项目很有必要。以下简要说明下Spring源码的下载和在eclipse下的构建方式。 工具/原料 JDK Eclipse 我们需要从源码库下载Spring的源码文件到本…

SpringToolsSuite (STS)或Eclipse安装gradle

对于新手刚进入职场&#xff0c;不知怎么在Spring Tools Suite (STS)或Eclipse上安装gradle&#xff0c;因为该项目自动化构建开源工具在一些企业中是要用的。本经验介绍如何安装。 工具/原料 Spring Tools Suite (STS)或Eclipse开发工具 gradle-5.0-all.zip压缩包 下载Gradle…

spring-beans模块分析

描述&#xff1a;spring-beans负责实现Spring框架的IOC模块 UML结构图如下&#xff1a; AbstractBeanFactory:BeanFactory接口的抽象实现类&#xff0c;提供了ConfigurableBeanFactory 完整SPI。 通过DefaultSingletonBeanRegistry实现了单例缓存(singleton cache). 实现了通过…

Vue学习【第六篇】:Vue-cli脚手架(框架)与实战案例

环境搭建 安装node 官网下载安装包&#xff0c;傻瓜式安装&#xff1a;https://nodejs.org/zh-cn/ 安装cnpm npm install -g cnpm --registryhttps://registry.npm.taobao.org 安装脚手架 cnpm install -g vue/cli 清空缓存处理 npm cache clean --force 项目的创建 创建项目 v…

递归函数实现二分查找法

最初版本&#xff1a; 改进版&#xff1a; 最终版本&#xff1a; 递归实现阶乘&#xff1a; 转载于:https://www.cnblogs.com/www-qcdwx-com/p/10399288.html

图解LinkedHashMap原理

1 前言 LinkedHashMap继承于HashMap&#xff0c;如果对HashMap原理还不清楚的同学&#xff0c;请先看上一篇&#xff1a;图解HashMap原理 2 LinkedHashMap使用与实现 先来一张LinkedHashMap的结构图&#xff0c;不要虚&#xff0c;看完文章再来看这个图&#xff0c;就秒懂了…

2019 GUDT RC 2 Problem C(题解)

原题 题目大意 这道题的背景是农夫和牛爬山,给出山的高度L,农夫会从山底以rF的速度爬山,中途不会休息,牛会从山底以rB的速度爬山,可以在休息站休息并吃草,在第i个休息站休息ti时间,牛可以吃t*ci的草,第i个休息站的高度为xi.农夫和牛同时出发,要求牛在不被农夫追上的同时吃最多的…

Express + Element-ui 实现图片/文件上传

使用第三方插件 formidable 处理表单数据/文件 Express 4 以前&#xff0c;我们通常使用 req.files 来对请求中的文件进行处理&#xff0c;但在 Express 4 中这种用法已经被抛弃&#xff0c;默认情况下 req.files 在 req 对象上不再可用。官方推荐我们使用第三方中间件。 在这里…

10-04 矩形覆盖(斐波那契数列的应用)

题目描述&#xff1a; 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形。请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形&#xff0c;总共有多少种方法&#xff1f; 解题思路与代码&#xff1a; 1&#xff09; 排列组合&#xff1a; class Solution { public:int rectC…

Spring 源码分析 spring-core

先来看下 spring-core 的包结构 总共有6个模块&#xff0c;分别是 asm、cglib、core、lang、objenesis、util asm包&#xff1a; 用来操作字节码&#xff0c;动态生成类或者增强既有类的功能。主要包含以下这些类。详细功能。 https://www.ibm.com/developerworks/cn/java/j…