JavaScript标记上的defer与async的作用与区别
当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档。但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可以将脚本标记为 async,以便由其他线程对脚本进行解析和执行。
三者之间的区别?
script
当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档。
defer script
当浏览器遇到 script 标签时,文档的解析不会停止,其他线程将下载脚本,待到文档解析完成,脚本才会执行。
async script
当浏览器遇到 script 标签时,文档的解析不会停止,其他线程将下载脚本,脚本下载完成后开始执行脚本,脚本执行的过程中文档将停止解析,直到脚本执行完毕。

什么情况下使用 defer 和 async?
- 如果脚本不依赖于任何脚本,并不被任何脚本依赖,那么则使用 defer。
- 如果脚本是模块化的,不依赖于任何脚本,那么则使用 async。
转载自:http://www.webhek.com/javascript-defer-async
JavaScript标记上的defer与async的作用与区别的更多相关文章
- 脚本引用中的defer和async的用法和区别
之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...
- javascript延迟加载及异步(defer和async)
一直以来写代码的时候的常用习惯就是吧所有的js文件直接加载在文档的head标签里面,在写js文件的时候有时候获取一些文件对象的时候为空对象,这是由于文档结构还没有加载完,但是js文件已经加载完.也就是 ...
- javascript中的defer和async学习+javascript执行顺序
一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...
- javascript的defer和async(转载)
http://ued.ctrip.com/blog/?p=3121 我们常用的javascript标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自http ...
- script 标签的defer,async的作用,及拓展浏览器多线程,DOMContentLoaded
前端优化有一点就是优化js的执行时机,一般做法是将script放置于body的结束标签,以避免加载执行js 文件导致页面渲染阻塞的问题这种做法确实能防止页面阻塞,但是在页面渲染完成之后才去加载js文件 ...
- script的defer和async
我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...
- <script>标签中的 defer 与 async区别
在html里,使用<script>标签对脚本进行外部或内部引用,<script>标签包含了两个特殊的属性:defer与async,他们的区别如下: 1.若<script& ...
- JavaScript 的 defer 与 async
当解析器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档.但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可 ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
随机推荐
- sublime text 3 如何安装 package control
sublime text3 是个很好的编辑工具,前端程序员觉得她很好,我是在一次视频中看到她能帮助自动完成很多快捷的操作. 为什么安装? 如果想要给sublime text 中安装别的插件(这里称呼为 ...
- Swift 2.0初探
转眼间,Swift已经一岁多了,这门新鲜.语法时尚.类型安全.执行速度更快的语言已经渐渐的深入广大开发者的心. 今年6月,一年一度的WWDC大会如期而至,在大会上Apple发布了Swift 2.0,引 ...
- Post-office 树状数组
Post office 题目描述 There are N(N<=1000) villages along a straight road, numbered from 1 to N for si ...
- redis的info
redis的info http://redis.readthedocs.org/en/latest/server/info.html INFO INFO [section] 以一种 ...
- SQOOP Load Data from Oracle to Hive Table
sqoop import -D oraoop.disabled=true \ --connect "jdbc:oracle:thin:@(description=(address=(prot ...
- select2取值报错,Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.
用到了 select2 组件来多选收件人,用搜狗浏览器(6.2版高速模式)在执行到如下这句时报错(Uncaught InvalidStateError: Failed to read the 'sel ...
- Unity3D MainCamera和NGUI UICamera的小插曲
集成NGUI 在实际的项目中,经常会使用NGUI来制作UI,用Main Camera来表现3D,但是NGUI的Camer的投射是正交视图而非透视,它绑定UICamer的脚本而且它的Tag默认是Unta ...
- 一个完整的JENKINS下的ANT BUILD.XML文件
网上看见的,确实很全,该有的基本都覆盖到了.自己拿来稍微改改就可以用了. 注:property中的value是你自己的一些本地变量.需要改成自己的 <?xml version="1.0 ...
- ArrayList和Hashtable
public class Tools{ public string Name{get ;set;}} #region 0.1ArrayList集合 ////告诉内存,我要存储内容 //ArrayLis ...
- <<Effective Java>>之善用组合而不是继承
使用JAVA这门OO语言,第一要义就是,如果类不是专门设计来用于被继承的就尽量不要使用继承而应该使用组合 从上图2看,我们的类B复写了类A的add喝addALL方法,目的是每次调用的时候,我们就能统计 ...