script defer和async一探
今天几经折腾,终于回家了,最近公司上的事忙了好一阵子,终于可以闲下来,重新在整理一下,又重新了解了一下defer和async在页面加载过程差异。
定义和用法
async 属性规定一旦脚本可用,则会异步执行。
注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
注释:有多种执行外部脚本的方法:
- 如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
- 如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
- 如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script> window.onload = function(){
console.log("window is loaded")
}
document.onreadystatechange = function(){
console.log(document.readyState)
}
console.log("normal laod")
</script>
</head>
<body> <script src="defer/a.js" defer></script>
<script src="defer/async-defer.js" async defer></script>
<script src="async/a.js" async></script>
<script src="async/b.js" async></script>
<script >
console.log("last node")
</script>
</body>
</html>
看一下在chrome中执行结果:
normal laod
index.html:24 last node
index.html:12 interactive
a.js:1 defer d
async-defer.js:1 async-defer
a.js:1 async a
b.js:1 async b
index.html:12 complete
index.html:9 window is loaded
执行顺序:
normal > defer > async-defer > async > complete > onload
看似好像都是这样顺序加载没有什么问题,其实在async中,并不是像现在这样看到的 async a async b;当文件加载大或者延迟,是会影响async和defer加载结果。
script defer和async一探的更多相关文章
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
- script的defer和async
我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...
- 转:script中的async和defer
script中的async和defer defer: This Boolean attribute is set to indicate to a browser that the script is ...
- <script>标签中的 defer 与 async区别
在html里,使用<script>标签对脚本进行外部或内部引用,<script>标签包含了两个特殊的属性:defer与async,他们的区别如下: 1.若<script& ...
- HTML <script> 标签的 defer 和 async 属性
HTMKL <script>标签中有defer和async属性,简单介绍一下两者的区别吧. 普通的script标签会让浏览器立即下载并执行完毕,执行也是按照先后顺序,再进行后面的解析. ...
- 异步加载script,提高前端性能(defer和async属性的区别)
一.异步加载script的好处 为了加快首屏响应速度,前端会采用代码切割.按需加载等方式优化性能.异步加载script也是一种前端优化的手段. 就好比如果我的页面其中一个功能需要打开地图,但是地图的j ...
- <script>标签里的defer和async属性 区别(待补充)
defer与async的区别(表格显示): table th:first-of-type { width: 150px; } table th:nth-of-type(2) { } 区别 defer ...
- <script>, <script async>, <script defer> 三种标签的区别
<script>, <script async>, <script defer> 三种标签的区别 <script>标签 阻塞html parsing 脚 ...
随机推荐
- Session分布式共享 = Session + Redis + Nginx
一.Session 1.Session 介绍 我相信,搞Web开发的对Session一定再熟悉不过了,所以我就简单的介绍一下. Session:在计算机中,尤其是在网络应用中,称为"会话控制 ...
- oracle lag与lead分析函数简介
lag与lead函数是跟偏移量相关的两个分析函数,通过这两个函数我们可以取到当前行列的偏移N行列的值 lag可以看着是正的向上的偏移 lead可以认为负的向下的偏移 具体我们来看几个例子: 我们先看下 ...
- Hibernate学习笔记①
---恢复内容开始--- 1.JavaEE的三层结构 WEB层--Service层--DAO层 2.Hibernate版本 Hibernate3.x 4.x 5.x 4版本是过渡版本 不使用 5 ...
- 4063: [Cerc2012]Darts
4063: [Cerc2012]Darts Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 85 Solved: 53[Submit][Status] ...
- Python模块发布
项目根目录添加setup.py模块: from distutils.core import setup setup( name="模块名字", version="1.0. ...
- Mysql5.7服务下载安装
身处MySQL这个圈子,能够切身地感受到大家对MySQL 5.7的期待和热情,似乎每个人都迫不及待的想要了解.学习和使用MySQL 5.7.那么,我们不禁要问,MySQL 5.7到底做了哪些改进,引入 ...
- 【转】JavaScript 之arguments、caller 和 callee 介绍
1.前言 arguments, caller , callee 是什么? 在JavaScript 中有什么样的作用?本篇会对于此做一些基本介绍. 本文转载自:http://blog.csdn.ne ...
- 关于mui选择器的使用
使用mui引入选择器的picker.js.poppicker.js.及他们的css文件之后引入代码与点击确定之后的状态: document.querySelector('#osex').addEven ...
- MySQL中的一些内置函数
mysql> select now(); #获取当前的日期和时间 +---------------------+ | now() | +---------------------+ | -- : ...
- 【Electron】Electron开发入门(七):打开本地文件或者网页链接 and webview里操纵electron api
1.打开本地文件或者网页链接 // 打开系统本地文件 const {shell} = require('electron'); // Open a local file in the default ...