JS - defer 和 async
普通
<script src="script.js"></script>
没有 defer
或 async
,浏览器会立即加载并执行指定的脚本,“立即” 指的是在渲染该 script
标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
async
<script async src="script.js"></script>
有 async
,加载和渲染后续文档元素的过程将和 script.js
的加载与执行并行进行(异步)。
defer
<script defer src="myscript.js"></script>
有 defer
,加载后续文档元素的过程将和 script.js
的加载并行进行(异步),但是 script.js
的执行要在所有元素解析完成之后,DOMContentLoaded
事件触发之前完成。(注意:带有defer
属性的脚本执行也不一定按照顺序执行)
参见
javascript - defer 和 async 的区别 - SegmentFault 思否
JS - defer 和 async的更多相关文章
- JS—ajax及async和defer的区别
###1.ajax “Asynchronous Javascript And XML”(异步 JavaScript 和 XML) 使用: 如不考虑旧版本浏览器兼容性, // 第一步创建xhr对象 v ...
- Js高设笔记1-2章 defer and async
1,js是由ECMAscript ,dom ,bom组成的专为网页交互而设计的脚本语言.js是脚本语言之一. 2,MIME,是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的 ...
- js中sync、defer、async的区别
<script src="script.js"></script> 没有 defer 或 async,浏览器会默认为同步sync,会立即加载并执行指定的脚本 ...
- javascript的defer和async的区别。
我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
- defer 和 async 本地对象和宿主对象
<script async></script> 没有defer和async的情况下是"同步执行"的,浏览器解析到这里的时候,会先加载资源完成后立即执行,并阻 ...
- 脚本引用中的defer和async的用法和区别
之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...
- javascript中的defer和async学习+javascript执行顺序
一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...
- defer和async的区别
先来试个一句话解释仨,当浏览器碰到 script 脚本的时候: <script src="script.js"></script> 没有 defer 或 a ...
随机推荐
- java 求数组最大子序列之和
经典问题: 给定一个int[]数组,求其最大子序列之和(条件:数组中不全部都是负数). 最优算法,线性时间复杂度: public static int maxSubSum(int[] a){ int ...
- 用户吐槽不断:Android 10.0没法用
如果你升级到Android Q第三个测试版的话,那么最近是不是被设备不断重启搞崩溃了,事实上也确实如此,因为有很多用户都遇到了类似的情况,大家吐槽谷歌的声音越来越大. 不少用户发现,自己设备升级至An ...
- DevExpress中的gridControl选择问题
在Dev控件中,gridControl是最常用的一个了. //直接通过gridView获取当前行 dr=this.gridView1.GetDataRow(this.gridView1.Focused ...
- python socket使用
自学python,先在菜鸟教程网自学,然后买了本书看.又从同事那里淘到了某个培训学校python教学视频,查缺补漏.视频是用python3.0讲的,讲解的很不错,中间有让写作业,这个我很喜欢.这几天看 ...
- php中禁止单个ip与ip段访问的代码小结
1.禁止单个IP <?php //IP访问限制 if(getenv('HTTP_CLIENT_IP') && strcasecmp(getenv('HTTP_CLIENT_IP' ...
- linux之crontab定时器
一.安装crontab yum -y install vixie-cron yum -y install crontabs 说明:vixie-cron 软件包是 cron 的主程序:crontabs ...
- FCC 成都社区·前端周刊 第 3 期
01. Chrome65 的新功能 CSS Paint API 允许使用编程方式生成图像:Server Timing API允许服务器将时间信息通过HTTP headers传递给浏览器: CSS di ...
- vue 设置 input 为不可以编辑
我用最笨的方法,先实现功能先,用两个input,一个可以编辑,一个不可以编辑,失去焦点后隐藏可以点击的那个,点"编辑"时,显示可以编辑的那个input <div class= ...
- 【leetcode】Network Delay Time
题目: There are N network nodes, labelled 1 to N. Given times, a list of travel times as directed edge ...
- 对DOMContentLoaded的研究 -----------------------引用
1. 什么是 DOMContentLoaded.打开 Chrome DevTools,切到 Network 面板,重新加载网页,得到如下截图: 标记 1 指向的蓝线以及标记 2 指向的蓝色字 “ ...