JavaScript 的 defer 与 async
当解析器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档。但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可以将脚本标记为 async,以便由其他线程对脚本进行解析和执行。
三者之间的区别?
script
当解析器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档。
defer script
当解析器遇到 script 标签时,文档的解析不会停止,其他线程将下载脚本,待到文档解析完成,脚本才会执行。
async script
当解析器遇到 script 标签时,文档的解析不会停止,其他线程将下载脚本,脚本下载完成后开始执行脚本,脚本执行的过程中文档将停止解析,直到脚本执行完毕。
什么情况下使用 defer 和 async?
- 如果脚本不依赖于任何脚本,并不被任何脚本依赖,那么则使用 defer。
- 如果脚本是模块化的,不依赖于任何脚本,那么则使用 async。
需要注意的地方
- async 对于内联脚本没有作用。
- defer 不应该在内联脚本上使用。从 Gecko 1.9.2 开始,内联脚本的 defer 会被忽略,但是在 Gecko 1.9.1 中,如果定义了 defer 属性,即使内联脚本也会被延迟执行。
- defer 的脚本是按照声明顺序执行的。而 async 的脚本不同,只要脚本下载完成,将会立即执行,未必会按照声明顺序执行。
- IE9 及以下版本的浏览器,defer 的脚本也未必会按照声明顺序执行。
- 如果同时使用 defer 和 async,则会默认使用 async,忽略 defer。
参考链接
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script
JavaScript 的 defer 与 async的更多相关文章
- javascript的defer和async(转载)
http://ued.ctrip.com/blog/?p=3121 我们常用的javascript标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自http ...
- javascript的defer和async的区别。
我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...
- javascript中的defer和async学习+javascript执行顺序
一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...
- javascript延迟加载及异步(defer和async)
一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是 ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- 【javascript基础】 JavaScript defer和async区别
defer该属性用来通知浏览器,这段脚本代码将不会产生任何文档内容.例如 JavaScript代码中的document.write()方法将不会骑作用,浏览器遇到这样的代码将会忽略,并继续执行后面的代 ...
- JavaScript标记上的defer与async的作用与区别
当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档.但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可 ...
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
- 脚本引用中的defer和async的用法和区别
之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...
随机推荐
- 谈谈LoveLive SIF以及即将诞生的LL练习器
由于课程需要和自身需求以及广大的LLer的需求,这个学期我将做一个造福全世界LLer的安卓app,它的名字是——还没想好(喂),总之是个LL SIF的练习器.什么?你问我LL SIF是什么?看来你不是 ...
- redmine常见问题
1.测试Pop3邮件收件任务:rake redmine:email:receive_pop3 RAILS_ENV="production" host=pop.cecgw.cn po ...
- c++的构造函数
我刚学的知识:c++的构造函数.在在此之前一直都处于迷惑之中,现在怕忘.所以赶紧把他写下来,用来以后复习,可能有错误的地方,请大牛们指出来.c++知识相对与c来说更加抽象,但真明白了,也就那一回事.这 ...
- LED将为我闪烁:控制发光二极管
一个完整的linux驱动主要由内部处理和与硬件交互两部分组成.其中内部处理主要是指linux驱动的装载.卸载.与设备文件相关的动作处理以及业务逻辑等:与硬件交互主要是指通过iowrite32.io ...
- mui小总结
下拉刷新 第一: mui.init({ pullRefresh: { container: '#pullrefresh', up: { contentrefresh: '正在加载...', callb ...
- sqlserver数据库 Schema
//读取数据库中所有的数据库 USE MASTER DECLARE @is_policy_automation_enabled bit SET @is_policy_automation_enable ...
- apiCloud又拍云数据库操作经验
1.在数据库表中有个relation字段,表示一对多(对应其他表的多个记录),这个字段比较奇怪,因为实际上这个字段里并未保存实际值.而是保存在对应表的字段中.但是对应表显示出来并没有这个字段.导出数据 ...
- quick-cocos2d-x :加入学习
语法不熟悉, 接口不熟悉. 部分不理解. 超级初学者. 好好学习, 一直在学习 使用Quick-Cocos2d-x搭建一个横版过关游戏 推荐官方的文档和例子 demo
- 关于32位windows和64位windows
SysWow64文件夹,是64位Windows,用来存放32位Windows系统文件的地方,而System32文件夹,是用来存放64位程序文件的地方. 当32位程序加载System32文件夹中的dll ...
- C语言----------链表的简单操作
#include <stdio.h> #include <malloc.h> typedef struct node{ //定义节点类型 char data; //数据域 st ...