怎样理解script标签的defer属性和async属性
如果script标签是引用的外部js文件, 那就会有一个下载js文件这一过程, 为了不因为这个下载过程而阻塞页面解析与渲染, 我们需要一种机制来解决这一问题, 方法之一就是使用 defer和async属性.
方法1. 使用 defer属性
defer属性的作用是延迟脚本的执行, 只有等到DOM生成之后才会执行脚本. 类似在DOMContentLoaded事件下添加监听函数.
// test1.js
// console.log(document.body.nodeName); // test1.html
<!DOCTYPE html>
<html lang="zh"> <head>
<script defer src="./test1.js"></script>
</head> <body>
</body> </html>
defer 属性的运行流程主要有下面几步:
1. 浏览器下载的同时解析html
2. 发现带有defer的script标签时, 会在下载html的同时下载这个script标签的外部js文件
3. 下载并解析html完成后会触发 DOMContentLoaded事件, 但在这个事件触发之前, 带defer的js文件就会开始执行.
注意:
1. 多个带defer的script标签的最终执行顺序是跟它们在html中出现的先后顺序严格对应的
2. 对于不是加载外部js文件和动态生成的script文件, defer属性不生效
3. 使用defer加载的外部脚本不应该使用document.write()方法.
方法2. 使用async属性
async属性和defer属性都能解析加载script外部js文件引起的阻塞问题, 不过defer属性是在DOM载入完成以后才会执行, 而async是另开一个进程去下载脚本, 下载完成以后立刻执行, 执行的时候是会暂停解析的.
也就是说: async解决阻塞的方法是: 另开一个进程下载脚本, 这样就不会阻塞主进程html网页的解析.
// test1.js
// console.log("defer是DOM载入完成后执行.") // test2.js
// console.log("async是新开一个进程, 下载完成后就暂停主进程的解析, 执行下载的脚本.") <!DOCTYPE html>
<html lang="zh"> <head>
<script defer src="./test1.js"></script>
<script async src="./test2.js"></script>
</head> <body>
</body> </html>
注意:
1. 使用async不能保证脚本的执行顺序, 而是谁先下载完, 就先执行谁, 因此async适用于脚本直接没有依赖关系的情况. 反之在用defer;
2. 如果一个scritp标签同时有defer和async属性, 则defer失效, script的行为由async决定;
3. 在脚本中还是不能使用document.write()方法.
总结起来, defer和async区别在于, 前者是在html解析完毕后按顺序执行, 而async是单独下载, 完成后立即执行.
怎样理解script标签的defer属性和async属性的更多相关文章
- HTML <script> 标签的 defer 和 async 属性
HTMKL <script>标签中有defer和async属性,简单介绍一下两者的区别吧. 普通的script标签会让浏览器立即下载并执行完毕,执行也是按照先后顺序,再进行后面的解析. ...
- script标签的defer、async属性
之前一直对script标签的defer.async属性一知半解,直到看到了论坛上某大神发的图片,茅塞顿开!!!!!
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
- script 标签的defer,async的作用，及拓展浏览器多线程，DOMContentLoaded
前端优化有一点就是优化js的执行时机,一般做法是将script放置于body的结束标签,以避免加载执行js 文件导致页面渲染阻塞的问题这种做法确实能防止页面阻塞,但是在页面渲染完成之后才去加载js文件 ...
- 【JavaScript性能优化】------理解Script标签的加载和执行
1.script标签是如何加载的?当浏览器遇到一个 < script>标签时,浏览器会停下来,运行JavaScript代码,然后再继续解析.翻译页面.同样的事情发生在使用 src 属性加载 ...
- HTML中<script>的defer属性与async属性
defer 属性会在 DOMLoaded 事件之前完成异步加载,加载不会阻塞 DOM 解析,并且 script 的顺序会按照 DOM 中的顺序加载. async 属性就是异步加载,没有什么顺序的保证.
- script标签中defer和async的区别（稀土掘金学习）
如果没有defer或async属性,浏览器会立即加载并执行相应的脚本.它不会等待后续加载的文档元素,读取到就会开始加载和执行,这样就阻塞了后续文档的加载. 下图可以直观的看出三者之间的区别: 其中蓝色 ...
- 您是不是奇怪为什么 <script> 标签中没有 type="text/javascript" 属性？
在 HTML5 中该属性不是必需的.JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!
- Javascript高级编程学习笔记（2）—— Script标签
script标签 js在浏览器中的使用,肯定会涉及到script标签. 那么script标签有哪些属性呢? 1.async:异步加载(不让页面等待该脚本的加载执行,异步加载页面的其他部分) 2.cha ...
随机推荐
- train loss和test loss
train loss 不断下降,test loss不断下降,说明网络仍在学习;(最好的)train loss 不断下降,test loss趋于不变,说明网络过拟合;(max pool或者正则化)tra ...
- LightGBM建模
LightGBM 1.读取csv数据并指定参数建模 # coding: utf-8 import json import lightgbm as lgb import pandas as pd fro ...
- VS版本 与 VC版本 的对应关系
Visual Studio 6 : vc6Visual Studio 2003 : vc7Visual Studio 2005 : vc8Visual Studio 2008 : vc9Visual ...
- python 日期计算
from datetime import timedelta,datetime import time tdy = datetime.today() tdy = tdy.strftime(" ...
- osg fbx遍历模型节点名称
; k<sg->getNumChildren(); k++) { //转换编 std::string name = vcfbx1.w2m1(vcfbx1.m2w1(sg->getCh ...
- 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_12-课程预览功能开发-需求分析
5 课程预览功能开发 5.1 需求分析 课程预览功能将使用cms系统提供的页面预览功能,业务流程如下: 1.用户进入课程管理页面,点击课程预览,请求到课程管理服务 2.课程管理服务远程调用cms添加页 ...
- web自动化-selenium+Chrome驱动国内下载地址+驱动对应Chrome版本号
selenium各版本下载地址 http://selenium-release.storage.googleapis.com/index.html 国内下载:http://npm.taobao.org ...
- Python 爬虫从入门到进阶之路
https://www.cnblogs.com/weijiutao/p/10735455.html
- 使用PHP实现命令模式（转）
<?php /** * 命令模式 2010-08-21 sz * @author phppan.p#gmail.com http://www.phppan.com * 哥学社成员(http:// ...
- 生成count位随机数工具类
工具类 import java.util.Random; /** * 生成6位随机数字 */ public class GeneratorCode { /** * * @Title: getCode ...